How I Organize my Stylesheets | August 14, 2003
First off I try to break my styles down into logical chunks. I'll have a basic stylesheet that I'll serve up to Netscape 4 and within this I'll import the more advanced style sheets. On a simple site this may just be a single stylesheet, but on more complicated sites I'll break this stylesheet down further, usually having one for layout and one for styling. On the Message site The nav was a complicated little problem on it's own, so I gave it it's own stylesheet. I also used the FIR image replacement technique on the homepage headings and so created a separate heading stylesheet as well.
This breaking down of styles has two very useful results. First off it makes it very easy for me to find styles. If it's a layout style I need, I simply go into the layout stylesheet, whereas if I want to change fonts or colours, I go into my styling stylesheet. It also makes bug fixing easier. If I find a difficult problem I can stop importing one or more of the stylesheets to locate which stylesheet the bug is in.
Within the stylesheets I tend to add styles relating to their position in the flow of the document. Anything that is page wide I'll add at the top, then I'll add styles for my headers/branding, my nav, content and then footers (assuming thats the order these elements appear in the page).
Some people have suggested odd methods like having all the id's first, then the classes and finally the html elements, or setting everything out in alphabetical order. This is great if you can remember the type of element or it's name, but not much use if you can't. By laying everything out as it appears in the document, it's much easier to find the style you want. Also because you styles are following the flow of the document you're less likely to get any odd cascade problems.
Finally it makes life a lot easier to debug the code. I sometimes need too comment out chunks of CSS and HTML to locate a bug. It's much easier to do this if you know that the chunks of CSS you comment out are in the same order as the HTML, rather that having to comment out lots of sections in your CSS just to isolate one section in your HTML.
Posted at August 14, 2003 9:12 AM