Ever since web developers started using CSS for more than just defining fonts, maintenance of the resulting CSS files has been a bit of a problem, especially for large and complex sites. The issue has been discussed many times, but there doesn’t seem to be a widely recognised best practice for writing maintainable stylesheets. Time for a change?

Comments

My favourite method: Start typing and don’t look back. When you can’t get selectors to work, use !important. When all else fails, patch it with inline CSS.

Of course, I kid. One tool to help in at least the management (if not necessarily maintenance) of CSS is found in Firefox’s DOM Inspector. Select the node you want to diagnose and select “CSS Style rules” in the dropdown above the detail boxes. At least with that you can tell which rules found in any of your seventeen CSS files are currently applied, and in what order.

Style sheets for complex sites are big pain because of complexity. It is hard to keep everything in your head when you deal with big complex documents or even groups of documents.
Although many folks say manual way is the way to go, I feel like its time for really good professional tools to make our work easier.
I can’t specify the requirements for that kind of software but I think it’s clear that automation of some tasks in writing good style sheets can help to be more productive.

I try to use the most logical selectors i can… divide pages between (usually) #header, #nav, #content, #footer, and other main page divisions. from there on out, it’ll be #nav ul li, #lav ul h3, etc.

At some point, i’ll go through and give full ‘path names’ to each selector, based on nearest parent id - eg, #nav li ul li a, or something - the ensures i’m not missing a spot where a style is applying somewhere i don’t want it to.

nextly, i’ll organize the css by # in roughly logical order: header, navigation, content, extra stuff, and finally footer. within those sections, they are listed from less specific to more specific.

If i’m really peppy, i seperate all color information (replacing something like border:1px solid black; with border:1px solid;) and placing that in a seperate css file which contains only color information, making it easy to change the color scheme w/o changing the layout, or to randomly pick a color scheme, or mix-n-match schemes and layouts…

Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.