Organise your CSS

Over the years I have streamlined the way I write and structure CSS to make my workflow more efficient. Here are a few tips I have picked up along the way.

Use a global reset

Web browsers apply default styles to HTML documents, but they do so inconsistently. So that you have a level playing field when you start writing your CSS rules it is important to ‘reset’ those browser-defined styles.

Eric Myer’s venerable CSS Reset is the best known global reset snippet, and he has recently updated it for HTML5. Others options to consider are the HTML5 Doctor Reset Stylesheet and HTML5 Boilerplate.

It doesn’t matter which flavour of reset you use, just make sure you use one! A global reset saves you from having to overwrite browser-defined styles at multiple locations throughout your stylesheet, and leaves you to concentrate on defining the styles you want instead of removing the ones you don’t.

Break your CSS files into logical blocks

Stylesheets can grow very large, and the bigger they become the harder they are to navigate. One way to manage this complexity is to organise your CSS document into smaller blocks, each one dealing with a specific aspect of your application.

I use CSS comments to demarcate each block of rules in my stylesheet, making it easy to scan the document for section headings rather than hunting for individual selectors:

/* Navigation
**************************************************/
			
nav { ... }

/* Footer
**************************************************/
			
footer { ... }

The document outline you settle on will be a matter of taste, but I typically divide my stylesheet into the following sections:

• Global reset
• Minimal base styles (generic)
• Extended base styles (site specific)
• Common shared styles
• Page structure
• Navigation
• Headings
• Footer
• Forms
• Printer styles
• Handheld styles

The ‘global reset’ and ‘minimal base styles’ sections stay the same from one project to the next, but everything else will change depending on the project requirements. I also assign a block to each major section of the website: the homepage, image galleries, contact page, and so forth.

Use indentation to nest CSS rules

Certain CSS properties are inherited by descendant elements, and it can be helpful to visualise the inheritance chain by indenting your CSS rules. This makes it easy to see where an element sits within the document tree and inherits its properties from.

#nav {
    float:right;
    }
    #nav li {
        float:right;
        width:100px;
        }
        #nav li a {
            color:#ccc;
            }
        #nav li span {
            color:#fff;
            }

Indentation is very common when writing HTML markup, but I find it invaluable for organising my CSS too.

Organise your declarations following the box model

When I was a starting out with CSS I didn’t employ any particular system for organising declarations within my CSS rules. I imagine this is how most web designers start off, but the lack of logical structure makes it difficult to locate a specific property within your CSS rule.

Once I started to get more organised I began sorting declarations alphabetically, so for instance a background property would come before a width property. There is a certain logic to that approach, but it means that related properties (font-family, color, and text-indent, for instance) are scattered around the rule instead of being grouped together.

More recently I’ve settled on a method of organising declarations that keeps related properties grouped together, yet standardises the order in which they appear within a rule.

My method is to organise declarations following the CSS box model, moving from the outside in. In addition I place properties that affect the element’s interaction with the rest of the document at the top of the rule, and text-level rules near the bottom.

#my-element {
    display:block;
    float:left;
    margin:10px;
    border:1 px solid #999;
    padding:2px 4px;
    width:200px;
    height:50px;
    color:#fff;
    font-size:14px;
    background:#000;
}

The precise order in which properties should appear is debatable (should float come before display, or after?), nevertheless I find that that this approach helps me construct a mental picture of the element’s box model and its interaction with other elements on the page.

Use shorthand property values

Many CSS properties support shorthand notation which allow you to define several properties in a single declaration. This minimizes bloat as well as making your CSS easier to read and edit.

For example instead of:

border-width:2px;
border-style:dotted;
border-color:#ffffff;

You could write:

border:2px dotted #fff;

Write for readability, not performance

When multiple selectors share the same rule, place each selector on its own line. This increases readability and ensures the selectors don’t get lost in a lengthy list. The same goes for CSS declarations. Instead of chaining your declarations together on a single line give them room to breath.

#nav li a,
h2 a,
.home aside h3 {
    margin:1em 0;
    padding:0 0 0 50px;
    color:#ccc;
}

This is much more readable than:

#nav li a,h2 a,.home aside h3{margin:1em 0;padding:0 0 0 50px;color:#ccc;}

If you want the benefits of readable CSS and the bandwidth savings of single-line notation, then all you need to do is minify your CSS immediately prior to deploying your project or on the server.

Use comments for storing notes

I usually keep comments within my CSS files to a minimum, but one place where I like to be expansive is at the top of the document, where I store ‘meta information’ about the stylesheet.

In this header comment I include the project name, the purpose of the stylesheet and author contact details.

/* F6 DESIGN
   Master Styles
   Author: Jonathan Nicol (jonathan@f6design.com)
   
   Resources
   HTML5 Boilerplate: html5boilerplate.com
   
   Colors
   Text gray: #76797b
   Link blue: #03add1
   Heading black: #1b1d1e
**************************************************/

In the example above I have also made a note of any CSS techniques I may want to refer back to later, and stored references to commonly used hex color codes. It is a pain in the butt to scour the entire document looking for a specific hex value, and I find it more efficient to store my color codes in one place. You could use the same technique to store other commonly referenced CSS values, and needn’t restrict yourself only to colors.

Share your own tips

Organising CSS is very much a matter of personal preference, and there is no right or wrong approach. If you have any of your own CSS efficiency tips to share, please leave a comment below.