DEfusion.org.uk

At one of my previous jobs we had a massive amount of CSS to handle; we had the global styles, then section/page specific styles and on top of both of those we had different styles for various versions of the application (as the same application and content ran many sites).

The solution we came up with was not too dissimilar to the one discussed in this months A List Apart article Progressive Enhancement with CSS and that article is well worth a read. But I also thought I’d write a little about the setup that we came up with and how it worked out for us.

The basic setup was as follows:

• Split the styles into their three components of the CSS make-up: layout, typography, skin (with the skin file containing the colour and graphics). As this kept things nicely compartmentalised and meant that we could re-use some styles from one site (e.g. the layout generally was the same for most content across all the sites) while applying extra changes specific to that site.
• The stylesheets were organised into directories based on the section (or sometimes specific page) of the application. So for example home/layout.css, home/skin.css, news/layout.css and news/skin.css etc.
• We could then also import specific stylesheets for each of our sites on top of these (both at a global and section level) which usually just overrode a few style declarations to keep these site-specific style rules to a minimum.
• All of this was managed server side using a configuration schema which knew where to look for the stylesheets for a given section of the application (as well as the global ones) and include them as appropriate for the given site.

We also had common comment styling for breaking the larger stylesheets into sections (which makes it easier to find things) and tried to alphabetise our properties within each style rule (although it’s not something that I personally could always stick to).

This was quite a good system, it may have looked complex based on the number of stylesheets that were imported for any given page but it worked out really well and we never really had any problems with our CSS system.

I’ve even used it on a few of my own larger side projects with minor tweaking to the system (e.g. dropping the configuration schema and following a Rails-like "Convention over Configuration" setup), and as I say it is very similar to the one described in the A List Apart article Progressive Enhancement with CSS — that has a really good idea for handling the different media types, which we handled via our schema.