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

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:


some more content


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:


some more content


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.