Andrea's Blogger Templates

It is a good idea to break your style sheets down into sensible chucks for ease of maintenance. At Clearleft, we usually start with the most general styles first. These include styles that are applied to the body tag and should be inherited by everything on the site. Next are any global resets we may need, followed by links, headings, and other elements.

Once the general styles are covered, we start to get a little more specific and tackle our helper styles. These are general classes that are used across the site and include things like forms and error messages. We then move onto structural elements like layout and navigation.

As we move through the style sheet, we slowly layer styles on top of each other, getting more and more specific as we go. Now that the page furniture is out of the way, we turn our attention to page-specific components. Lastly we include any overrides and exceptions at the bottom of the document. The whole document structure ends up looking like this:

Not everything naturally falls into a well-defined  block, so some judgment is required. Keep in mind that the more you can break up and objectify your code, the easier it is to understand and the quicker you can find the rules you are looking for.

Because my style sheets tend to have a similar structure, I save time by creating my own precommented CSS templates to use on all my projects. You can save even more time by adding a few common rules that you use in all of your sites, to create a sort of prototype CSS file. That way, you will not have to reinvent the wheel each time you start a new project.