Maintaining CSS files

Simon Willison is looking for advice on CSS maintainability, and has set up a page at the css-discuss wiki: MaintainableCss. More background is available in Maintainability, a.k.a. the CSS elephant. Nate Steiner followed up with some of his thoughts in Maintainable CSS.

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?

Posted on October 9, 2005 in CSS, Quicklinks

Comments

  1. October 9, 2005 by Ara Pehlivanian

    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.

  2. October 10, 2005 by badrad

    Dear God Ara, before you said “I kid” you made me shudder.

  3. October 10, 2005 by Woolly Mittens

    I tend to indent my classes to the same depth as the html tags.

    This keeps it strangly readable.

  4. October 10, 2005 by Martin Smales

    CSS management needs a change if we are to keep putting all styles in a single stylesheet.

    Maintenance of styles needs to be broken down into parts serving different purposes, e.g:

    • formatting
    • layouts
    • other media types, e.g. media=”print”

    Keep them separated so that way you won’t drive yourself nuts in the long term.

  5. October 10, 2005 by Christian Hess

    It seems to me that we are in need of some sort of naming convention for CSS rules, which could help avoid conflicts between different style sheets, page-level and inline rules, etc.

  6. October 10, 2005 by Andrey Smagin

    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.

  7. October 15, 2005 by manzell

    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.