I like my CSS tidy. It just makes development and maintenance so much easier. At my job I’m typically working on large sites with multiple designers. Without some kind of system, a situation like that could easily lead to bloated, unwieldy files. To prevent that from happening, I use some standard organizational techniques, and encourage those who I’m working with to do so as well. I’ve picked up most of these tips from various resources around the web, but this is the combo that usually works for me.

Separation

I use one import.css file, which in turn imports all the other CSS files. I like the simplicity of this one link in the and it provides a nice index of what your CSS files are.

After the import file, I break everything up into separate style sheets according to their function. Here’s what I usually end up with:

• Reset
• Layout
• Type
• Widgets
• Forms
• Ads

Reset is all-important, but you know that already. I use a pretty basic one, but it does the trick. Layout is where I define all major structural elements—everything that gives the site its form. Type is where I define all body, paragraph, heading, and span tags. I put global definitions of those tags at the top, and then use inheritance when drilling down into section-specific type. Widgets is for all images, buttons, and box styles. Forms houses not only form styles, but the type styles that go along with forms as well. And finally, Ads. If you’re lucky enough to work on sites where there aren’t a lot of ads, right on. For large media companies, this is still the main source of income, so there are typically a lot of ads, and the corresponding styles are enough that they should have their own file.

Annotation

I think I picked this one up from smashing magazine, and thought it was a great idea. At the top of every style sheet I include something like the following:

/******************************
[type.css]

Last updated: 8/21/08, 3:13 PM
Last updated by: Patrick
Last updated: Latest news

#3f3f3f - type: dark gray
#3a68a3 - links: blue
#a5a5a5 - all caps: light gray
******************************/

Along with a summary up top, I try to comment on as many rules as possible, or as many that make sense. Not only does it help your fellow designers understand or explain why you coded it that way, it can also help yourself when you have to go back in three month’s later and make adjustments.

Style

How I write my CSS rules depends on the scope of the project. Although I’m not a huge fan of doing it, when I’m working on a large project, I usually write all the rules on one line.

h1 { font-size: 2.7em; line-height: 1em; font-weight: bold; } /* article titles */

Using one line per tag allows for quick scanning of the page, which can really help as your file grows longer (and longer).

Once you start getting into <div>s containing <div>s, I also think it’s really helpful to indent contained elements. We indent html, so why not CSS?

Maintenance

Take ownership and strive for consistency. Every now and then, devote a few minutes to tidying up those CSS files and making sure everything is in its proper place. Check to make sure type declarations are in type and haven’t bled over to layout. Keep it neat and you’ll impress everyone with your ability to handle requests quickly and without complaint.