Question

Quite often when I design a website for a customer, I design his website with one (or multiple) CSS files that makes up the entire presentation layer. The thing is, usually, the customer’s needs change drastically in terms of “website theming”. He may end up asking to change from a blue/green color-based theme to a red/orange based one according to his tastes. The thing is, my file contains all the information including:

• the positioning of elements
• the background images of containers
• the font size, color

What are the best practices for “decoupling” a CSS file to make it “theme” aware, while maintaining all its information on positioning?

My list of possible practices are as follow:

1. Use a default CSS file containing generic information and positioning, use child CSS files that implement only the background images, font-sizes and colors
2. Name your first CSS file (say here the blue/green one will be named “sky”). Implement another theme based on sky, overriding any CSS attributes needed to change the theme and name it (red/orange would be “crimson” for example).

EDIT: according to the great answers provided below, I updated the list of other possible solutions adding up to my list:

1. Use SASS, (best authored with Compass @see Andrew Vit) specifically their “Mixins” feature. It takes CSS and introduces a very DRY programmatic approach. You can override existing classes with it. –treefrog
2. Use an OOCSS approach. –Andrew Vit
3. A technique called independent blocks (article in Russian) that mimics a sort of namespacing using class prefix to seperate specific blocks. –angryobject
4. Three based stylesheets. Separating typography, position, and the reset stylesheet provided by Eric Meyer. –David Thomas
5. Use already standardized approaches used by known organisations such as the Dojo library, jQuery UI, etc.
   –S .Jones

Which would be better in which possible case? Are there any other easily maintainable and flexible ways?

Best answer to date: Using SASS to make very flexible stylesheets. Of course this implies the slight learning curve, but according to a few reviews, SASS seems to be the next approach for dynamic stylesheets (along with HAML).

Answer 1

You should look into SASS, specifically their “Mixins” feature. It takes CSS and introduces a very DRY programmatic approach. You can override existing classes with it, making it perfect for what I think you’re trying to do.

Link