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

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

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.

Answer 3

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 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

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