[bryanrasmussen]

Ok, and checking it I can see that foo.foo.foo increases specificity yet again and so on infinitum I suppose.

I suppose this behavior is specified somewhere and you've read that part of the spec thus explaining how you know it, however as the class declaration is not 'foo foo bar' I think if I were to read it I would conclude that I disagreed with whatever logic was given.

In fact this really seems to take away part of the argument for important, why not just make your rule be foo.foo.foo.foo.foo.foo when you really want to override something. Add enough foos you're sure to win out.

on edit: why I would find foo.foo acceptable if the class declaration was 'foo foo bar' is because, while I find 'foo foo bar' silly I can see why someone would specify what happens when it occurs. I would also have accepted if the spec said 'foo foo bar' is reduced down to 'foo bar' and foo.foo does not make any sense. I guess I find foo.foo not making sense as being my preferred behavior.

[eurasiantiger]

Here’s the thing: while the doubled-class ”.foo.foo” trick increases specifity over a single class, it doesn’t completely override selector specificity like !important does: you can still override anything set by ”.foo.foo” with a more specific selector like ”div.foo” or even ”.quux .foo” without having to use the duplicate classname everywhere.

[bryanrasmussen]

sure, but foo.foo.foo overrides foo.foo or foo.bar etc. It seems sort of ridiculous.

[eurasiantiger]

It’s not meant to be used that way. Think more like this:

Theme and color theme set layout and colors

    .theme—-national
    .color-theme—-green
    

And then there is also themed content that has its own color theming for context cues

    article.content-theme—-education

Now what if we want to have a top-level color theme that overrides any content theme? This could be useful for accessibility (high/low contrast).

We could use !important, but that’s just asking for trouble.

However, .foo.foo saves the day:

    .color-theme—-a11y.color-theme—-a11y article

… has higher specificity than

    .theme—-national.color-theme—-green article.content-theme—-education