[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