4 ms·
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 !im
by eurasiantiger 5y ago
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 5y agosure, but foo.foo.foo overrides foo.foo or foo.bar etc. It seems sort of ridiculous.
- eurasiantiger 5y agoIt’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