Best practices with CSS in Dreamweaver CS4

What does CSS "best practices" mean?

We've always giggled slightly at the term best practices because it implies one technique is better than another, even though both might ultimately achieve the same goal. However, most technologies do have accepted standards or ways of accomplishing a task. With CSS, these standards can be somewhat nebulous, but there are definitely some basic approaches to be followed. And although non-standard CSS practices (including its lack of use) exist on the Internet, there are many benefits to adhering to the accepted standards for both your business/site and customers, including browser and forward compatibility of your site and easier maintenance.

Maintain separation

You've probably heard the mantra "content is king," and this is particularly true within the world of web design. All too often, we see sites which are "designed" first, and the content is then forced into it. Not only does this complicate the design and production process, it also leads to content that cannot be semantically marked up, and therefore cannot be properly optimized for search engines, nor reformatted for alternative devices.

You should always begin the design process by properly marking up the content before any thought has been given to design or CSS. This means identifying important heading elements as <h1> or <h2>, dividing text blocks into logical paragraphs using <p>, using lists to identify the elements of a navigation bar, and so on. After this has been completed, you can begin thinking about the source order of elements—placing the important pieces of content early on in the source so that search engines index them more readily. You can use different placement techniques with CSS to move them to the left or right based on your ultimate goal.

Through proper separation of content and presentation, you can achieve a number of benefits:

• Increase the longevity of your website. Many times in the heat of the moment, with a deadline looming, a quick fix via a non-standard practice may seem acceptable. Remember though that a future version of a browser may not be so tolerant of a shortcut or hack. Individually changing all of your web pages in the future could be very time-consuming and defeat one of the main purposes of using CSS in the first place. And the non-standard approach can further complicate matters if you are required to hand off your work to someone else to maintain.
• Make your website more accessible—to all users and devices. In some areas, government legislation requires websites to be accessible to users with disabilities. Applications that assist people with disabilities, such as screen reader software, are especially dependent on the best use of CSS styles. Additionally, with the proliferation of mobile devices capable of browsing the web, you should keep in mind that their minimal screen size can wreak havoc on a design intended for a 1024×768 screen. Through CSS you can provide every visitor an experience that has been optimized specifically for their browser agent or at least provide the content in a readable, accessible manner.
• Reduce page weight; simplify website updates and maintenance. Properly implemented, CSS allows you to make changes to your website in one location and to see those changes take effect globally throughout your entire website. Because CSS files are cached, they are downloaded only once enabling every subsequent page within the site to load faster.

For more information on the benefits of CSS, see Why use CSS? on Adobe Developer Connection.

Page 2 of 6

Previous Page

Next Page