[Yanel-dev] CSS modularity & conflicts, e.g. in the Yanel toolbar

Tue Feb 23 09:32:13 CET 2010

Hi!

On a recent project, we had many problems with CSS styles conflicting 
with each other because the initial CSS design was not created with 
modularity in mind.

The current Yanel toolbar design exemplify this, its structure being:

<body [...]>
   <div id="yaneltoolbar_headerwrap">
     [toolbar-specific code]
   </div>
   <div id="yaneltoolbar_headerwrap">
     [copy of the contents of the 'body' element of the original page]
   </div>
</body>

And among the CSS rules used there is:

#yaneltoolbar_middlewrap

This is bad because to override such a rule, you have to be "more 
specific" than it, that is to use at least two id selectors (*): cf. 
http://www.w3.org/TR/CSS2/cascade.html#specificity
This is it obliges us to ids when classes may be enough, and more ids 
than may be necessary => less generality => less modularity
That's why we should avoid wrapper elements for styling as much as 
possible, because it makes CSS rules much more complicated down the road.

Also if some rules rely on the ancestry of some elements in the div, 
like "body > div", or "body div" and "body div div", these will not work 
anymore.

In this case, one could probably simply try to remove the body contents 
wrapper "div#yaneltoolbar_middlewrap" and add the toolbar as the first 
element of the body.
(However there may well be a very good reason why it is done like this 
now, but the code doesn't tell.)

(*): Contrary to what I thought, one does have to use the /same id/ in 
addition to another new one, but relying on the number of id or class 
rules for specificity can be really confusing, especially when this 
number is relatively high, e.g. >= 4 or so. Ditto for 
(pseudo-)elements/(pseudo-)classes.

Based on this and previous experience, as a rule of thumb, one should 
try to:
- use a few wrapper elements as possible because they make the page 
heavier, harder to read and apply style to
- never use id-based rules if you don't need the element to be unique on 
the page: you never know, you could
get integrated twice into a portlet! (It is probably OK in the toolbar 
because several toolbars per page would be extremely confusing UI-wise 
and probably wouldn't work anyway logic-wise)
- as IE6 is now slowly fading away, when you do not need to support it 
do not hesitate anymore to freely use multiple classes per element and 
CSS rule.

Cheers,
    Guillaume