Best Practices - CSS Theming

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

Answer 2

Consider the approach suggested by OOCSS. The general idea is to separate the style concerns of your classes into more granular units, so that you end up using more classes in your markup instead of hanging all of your styling on too few classes with overlapping concerns.

This can be combined with some of the other suggestions. (I highly recommend authoring SASS with Compass!)

Answer 3

In situations where a theme is required I, personally, tend to use three base-stylesheets:

• A reset stylesheet (typically Eric Meyer's)
• A stylesheet for positioning of elements (margins, paddings, floats, etc)
• Typography and colours

There is an awful lot of repetition in this approach, though, so @treefrog's answer may well be a better approach. The one saving grace I can offer for my approach, which is why it works well for me, is that it's easy to know where to go to change the title font from Arial to Times New Roman (or whatever), and where to find the background-colours for the page. Typically these are stored in a Wordpress-like arrangement:

http://www.example.com/css/reset.css http://www.example.com/css/themeName/typography.css http://www.example.com/css/themeName/layout.css

Answer 4

I know about a techniques based on using so-called independent blocks. A block here is a part of the page that can be described by its own layout and its own styles. There are some principles of that techniques like using only class attribute, not id; each block has a prefix; no styles outside blocks or minimum global styles. But those are optional more or less. Suppose you have a block:

<div class="b-my-block">
<span>some more content</span>
</div>

And a style for that block:

.b-my-block{ width:100%; height:300px; }

.b-my-block span{ background:red; }

'b' here is the prefix for the block. You can have different prefixes for you needs. You may want to use prefix 'g' for some global classes that can be applied to and modify any other elements.

Then, if you want to extend this block or change it somehow, you can create a modification of this block with a class 'b-my-block_blue' for example:

<div class="b-my-block b-my-block_blue">
<span>some more content</span>
</div>

and a piece of css:

.b-my-block_blue span{ background:blue; }

This a very very rude example. And i'm not sure if i was explanatory enough. But i'm trying to use this technique in my current project and it feels pretty good so far. There is an article on this in russian. Maybe someone could translate it in english, if it has some interest for the people here.

Answer 5

Good Question. +1

I think for simpler layouts, where you can get away with theme changes based only on colors defined within CSS, then it makes sense to separate your CSS files into a core 'structural' file and several themed versions.

For more complicated themes, where images are imported as key parts of the layout or theme, it's better to completely nest your resources under a theme. You can see examples of this by exploring the directory structures of Javascript packages like Dojo that allow you switch between multiple themes. If you look through "Tundra" or "Soria" directory structures within the Dijit library, you'll see which 'best practices' they employed in dividing up their CSS files.