Recipe 1.10. Organizing the Contents of a Style Sheet

Problem

You want to know how effectively to organize contents within a style sheet for easier management.

Solution

Managing CSS can be accomplished by grouping common visual elements of a web page together. The following list shows a suggestion of the order of items grouped in a style sheet:

• Elements (h1h6, p, a, list, links, images)

• Typography

• Page layout (header, content, navigation, global navigation, subnavigation, sidebar, footer)

• Form tags (form, fieldset, label, legend)

• Content (post, events, news)

Here are the comments from three style sheets with each organizing the CSS differently:

/* Typography & Colors  ------------------------------------ */ [css code ] /* Structure ------------------------------------ */ [css code ] /* Headers ------------------------------------ */ [css code ] /* Images  ------------------------------------ */ [css code ] /* Lists ------------------------------------ */ [css code ] /* Form Elements  ------------------------------------ */ [css code ] /* Comments ------------------------------------ */ [css code ] /* Sidebar ------------------------------------ */ [css code ] /* Common Elements  ------------------------------------ */ [css code ]

Discussion

What works for one person may not work for another. This setup from the solution is a recommendation based on a combination of experience and best practices that should work best for small- to medium-size web sites.

For different projects and your own personal preference, you may find a way that works better for you. Visit your favorite web sites and review their style sheets to study how they're organized.

See Also

Doug Bowman's "CSS Organization Tip 1: Flags," a method for finding rules in your CSS files, at http://www.stopdesign.com/log/2005/05/03/css-tip-flags.html; Recipe 1.11 on how to organize style sheet files; and Recipe 11.7 on how to set up an intelligent hacking system.