Structuring your CSS File

It is a good idea to break your style sheets down into sensible chucks for ease of maintenance.

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.

Moving 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:

General styles

  • Body styles
  • Resets
  • Links
  • Headings
  • Other elements

Helper styles

  • Forms
  • Notifications and errors
  • Consistent items

Page structure

  • Headers, footers, and navigation
  • Layout
  • Other page furniture

Page components

  • Individual pages

Overrides

I use a large, stylized comment block to visually separate each section:

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.

Leave a Reply

Your email address will not be published. Required fields are marked *