CSS Maintainability

In response to Simon Wilson's post on CSS Maintainability…

My old partner in crime over here at work, in the ebusiness team where we build web applications, once posted a little something on this subject here @ mezzoblue where he suggests pulling out all the structural CSS that forms the layout of the page and placing it at the top of the document, using indentation to echo the nesting of the HTML.

In my own more recent work I have been doing something like this:

/* General Style - Tags */
body {...}
h1 {...}
p {...}

/* Layout - IDs */
#header {...}
#content {...}
#sidebar {...}
#footer {...}

/* Reusable Components - Classes */
table.columnarForm {...}
table.data {...}
label.error {...}

One item of note: we have found that as stylesheets become larger it is necessary to forsake the old practice of putting properties each on their own line, like this:

body {
   margin: 0;
   padding: 0;
   font: 86% Georgia, Times, serif;
}

and instead pulling them all onto one line so that it is possible to find a given rule, and see the structure of the CSS file at a glance, like this:

p { position: static; margin: 0 0 1em 0; color: #000; background-color: #fff; font-size: 1em; }

But in order to read these long lines of properties it is then necessary to put them in a consistent order. The order that I have been using is in de-bugging priority: position, layout, color, and typography (as shown above).