Developing a CSS strategy

With everything that goes into your site's style sheet, things can get out of hand if you don't have a coherent plan for managing your styles.

One of the big advantages of using CSS is that it saves you time and effort by pulling repetitious formatting code out of the HTML markup and consolidating it in the CSS style sheet. You can reuse styles to format multiple text blocks and to control layout and formatting on multiple pages. And, having reusable formatting in a centralized location saves development time—especially when you need to edit or update the Web site.

In contrast, one of the problems of working with CSS is that the CSS file can quickly become a confusing mess as you add more styles to the style sheet. There are styles to redefine HTML tag attributes, class and id selectors to format various text blocks, and still more styles for page layout. Some styles are sitewide, while others are applicable to individual pages. Then, there are all the hacks that are required to deal with cross-browser compatibility issues. With all that stuff going into the style sheet, it's easy to see how things can get out of hand if you don't have a coherent plan for managing your CSS style sheets.

The problem of the ad hoc style sheet

Most Web builders start working with CSS the same way: They create and edit styles as needed to format whatever portion of the Web page they're working on at the moment. Initially, the styles reside in the document header, but they get moved to an external style sheet when the contents of the <style> tag grow too big or the Web builder wants to use the styles in another document.

This ad hoc approach to style sheet development usually results in all the styles being stored in one CSS file with no particular order or organization. As the style sheet grows in size, it becomes harder to find and edit the styles you need. What's worse is that it becomes almost impossible to trace inherited properties through the cascading styles. You might get by with ad hoc style sheets for a single Web page or a small site, but the challenges of working with a big, disorganized CSS file grow exponentially as your sites get bigger and more sophisticated.

Have a plan

"Plan your dive; dive your plan" is a saying that SCUBA divers use as a reminder to work out a plan in advance and then stick to it. It's essential for divers to carefully plan depth and bottom time in order to avoid potentially fatal problems such as the bends. The consequences aren't as dire for Web builders, but if you want to avoid a lot of frustration and wasted time, then it's important for you to have a plan for managing your CSS style sheets.

There are different strategies for CSS style management. You may need to try variations on several approaches before you find what works best for you. The important thing is to avoid the chaos of an ad hoc style sheet by planning your CSS style development for a given site, and then following that plan.

Organizing your CSS styles

A common mistake that many Web builders who are new to CSS make is to put all the styles for the entire site into one CSS file. That approach works only for very small sites with few (if any) page-specific styles. For all but the smallest sites, it usually works better to use multiple CSS files.

For example, you might have one CSS file devoted to sitewide styles and separate CSS files for identifiable subsets of site pages (such as pages for a specific department or pages with a different layout style). For styles that are unique to a specific page, use a separate CSS file for each page (if there are too many styles to fit comfortably in the document header). You link or import the appropriate CSS files for each page, so that you load all the styles needed to display that page, but very few unnecessary styles that only appear on other pages.

A technique that I like to use to organize CSS style sheets is to divide the style sheet file into sections. For example, in the main style sheet, the first section contains the styles with the broadest sitewide application, so it's mostly populated with styles that redefine the properties of HTML tags. Another section contains styles to format common page elements, such as the navigation bar or footer. The styles that control sitewide page layout go in another section. Subsequent sections create groupings of styles with a progressively more specific focus.

For a typical site, all the sitewide styles can go into one CSS file, with comments to delineate the sections. For a more complex site, you might want to break each section out into a separate file. A lot of Web builders like to separate the styles for page layout from the styles for formatting text and other elements by putting them in different CSS files.

Take advantage of the cascade

One of the defining characteristics of CSS is the cascade, which is what enables subsequent styles to inherit most of the properties of a previous style. That means that each style needs only to define the noninheritable properties and those properties that differ from any predecessor styles that apply to a given element. In other words, each style only needs to include the properties that make it unique and different from other styles. There's no need to explicitly define every possible property of every style.

Unfortunately, many Web builders don't take advantage of this feature. Instead, they often feel compelled to pad their styles with rules for every applicable attribute. Although it's tempting to play it safe by specifying all of the important properties of a style instead of leaving some attributes to the unseen magic of the cascade, the result is bloated code.

Avoid "class-itus"

Another common problem that plagues many Web builders is the overuse of classes and IDs. Adding classes and IDs to your markup and defining CSS styles to format those elements is one of the fundamentals of working with CSS. However, it's all too easy to get in the mindset of automatically creating a class for every little thing that you want to format. It's often much more efficient to redefine the properties of an HTML tag than it is to create a new class to overlay those properties on the element in question.

Another way to reduce the number of class styles you need in your style sheet is to apply multiple styles to the same page element instead of creating another style that simply combines the properties of two existing styles.

Code for the best, test for the rest

Believe it or not, the primary browser that you use for viewing your Web pages during development can have a significant effect on how you build your CSS style sheets.

Because of its overwhelming market share, many Web developers routinely use Internet Explorer as their primary browser. They first develop the site to look good in the browser used by most of their visitors, and then make whatever adjustments are necessary to deal with differences in the way other browsers render the site. It seems like a logical approach.

The problem is that IE is arguably the least standards-compliant of all the major browsers. Consequently, using IE to preview your code during development inevitably results in reflections of IE's many idiosyncrasies being embedded into the code. Then, to adapt that code to work on a more standards-compliant browser, you often need to rework substantial portions of the code.

Hopefully, the current problems with IE will eventually go away as we move toward a world where browsers and Web sites both conform to standards. With that future in mind, it makes more sense to develop your code according to those standards, and then add whatever temporary accommodations are necessary to make your site work on today's less-than-optimal browser.

The browser hacks that are needed to adapt standards-compliant code for display on older browsers are well documented. It's usually much easier to add (and later remove) those hacks than to rework your code to remove browser-specific idiosyncrasies.

If the goal is to produce standards-compliant code, then it makes sense to preview that code with the most standards-compliant browser available. Today, that's probably Mozilla's Firefox. (The availability of the Web developer toolbar extension is another powerful argument in favor of the Firefox browser.) After you get the effect you want in that browser, it's time to test your page in other browsers and begin the process of adding hacks and code tweaks to deal with browser compatibility issues.

If you follow this advice, you'll still spend a lot of time looking at your site in IE. It's just that you'll see it first in another browser—and your code just might be a little cleaner as a result.

Editor's Picks

Free Newsletters, In your Inbox