[bryanrasmussen]

I have to also say with the introduction of variables this starts to look crazy

:root { --main-color: brown; } .foo.bar { --main-color: red; } .foo.foo { --main-color: blue; } .bar { --main-color: red; color: var(--main-color); }

anyone actually use this foo.foo method of increasing specificity? Because I think difficult to debug.

[eurasiantiger]

It is useful when writing multi-theme, multi-color-palette design systems, for example to override colors in a specific component on a specific part of the site but only in a specific theme.