Having sat in on an interesting all-star seminar on CSS organisation at @Media 06 I figured I could post 5 tips about how I did for the template I've just built for this blog. It won't suit every person and every project of course, but you might be interested:

1. While writing the markup (before the CSS of course), copy all the id and class names into a CSS file as they are added to the page. This means when it's completely finished any empty (and therefore unused) ones can be removed from both the CSS and the markup.
2. Use the

   @import 'your.css';

   CSS filter format to hide presentation from v4 PC browsers and Mac IE.
3. Put any hacks in a separate file, using IE conditionals to include it - I like this because it means only IE users have to download the extra file: Serves them right.
4. For small sites have one CSS file. Use comments in this file to split it up and find your way about. I suggest "Global" (with "Layout" and "typography" sub-sections) then individual page sections (e.g. "mainContent" etc.). For large sites the number and organisation of files will depend on the design. You may have a global CSS file and then individual files for each discrete site section or you may have a global file and then separate files for repeated page elements, or both - whatever's suitable, but use the comments either way.
5. Have individual CSS rules all on one line so the file doesn't get too tall (it's harder to read initially, but you get used to it) and order with positional values first, then sizing then decoration to help quickly spot the bit you need.

Labels: css