Tales of a Designer

Organizing your CSS

One thing that I’ve learned since first starting to write CSS, that’s extremely important, is organizing your stylesheets. Even the smallest sites can have larger stylesheets, and if you don’t have some sort of structure, it can become a headache to maintain over time as it grows.

There is no right way to organize. I’ve seen and tried many different ways and stuck with the one that works best for me. One thing that’s fairly consistent in all of my stylesheets is putting basic styles and site colors at the top, shown in the example below.

/*
======================================================
COLORS
======================================================
Gray Text: #
Blue Links: #
*/

* { margin:0; padding:0; }
.bn { border:0; }
.fl { float:left; }
.fr { float:right; }
.cl { clear:left; }
.clear { clear: both; }

These are obviously some of the basic classes that I will reuse across the whole site, so it’s nice to get some of those out of the way at the beginning before you get into the more specific id’s and classes.

It’s also important to group sections together and divide it by some sort of separator:

/*
======================================================
>>Site structure (layout)
======================================================
*/

Grouping sections together saves tons of time. It allows you to find sections very quickly through search, especially using the “>>” before the section title to easier flag those sections. In terms of grouping sections, do what feels most comfortable. Here are the groupings that I use, mostly, in my stylesheets:

• Colors
• Basic Styles
• Site Structure
• Navigation
• Headers
• Parapgraphs
• Lists
• Links
• Images
• Forms
• Miscellaneous

Is this the best way? Of course not, but every developer works differently, so the key is trying out different methods to see what works best for your style. The suggestions above have proved to work very well for me, and I’m still finding new ways to improve it. Using shorthand CSS is also a good way to keep your CSS lean, but some find that it’s not too helpful.

I’ve created a stripped down version of a basic stylesheet structure based on what I’ve mentioned above, so for those of you looking for a starting point, feel free to download the one I’ve put together.

What other key tips would you say are useful when organizing your CSS?