4 ms·

Which rules wins is the rule that is the most specific. This article explains it as having 'the most hits'. Whatever that means.

wccrawford 5y ago
Not just most specific, though. IDs are weighted higher than classes, so if there's a tie between 2 rules, an ID wins over a class, even if it comes first. If 2 classes (or things weighted the same as classes) tie, the later rule wins. https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
- eurasiantiger 5y ago
  Class specificity can be artificially increased to work around this. .foo.foo { color: blue; } .bar { color: red; } <div class=”foo bar”> I’m blue </div>
  - bryanrasmussen 5y ago
    shouldn't that be foo.bar?
    - eurasiantiger 5y ago
      No, the idea is that .foo.foo increases the specificity of .foo over .bar
      - bryanrasmussen 5y ago
        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 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 ago
        sure, but foo.foo.foo overrides foo.foo or foo.bar etc. It seems sort of ridiculous.
        eurasiantiger 5y ago
        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
      - bryanrasmussen 5y ago
        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 5y ago
        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.

wccrawford 5y ago

Not just most specific, though. IDs are weighted higher than classes, so if there's a tie between 2 rules, an ID wins over a class, even if it comes first. If 2 classes (or things weighted the same as classes) tie, the later rule wins. https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

eurasiantiger 5y ago
Class specificity can be artificially increased to work around this. .foo.foo { color: blue; } .bar { color: red; } <div class=”foo bar”> I’m blue </div>
- bryanrasmussen 5y ago
  shouldn't that be foo.bar?
  - eurasiantiger 5y ago
    No, the idea is that .foo.foo increases the specificity of .foo over .bar
    - bryanrasmussen 5y ago
      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 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 ago
        sure, but foo.foo.foo overrides foo.foo or foo.bar etc. It seems sort of ridiculous.
        eurasiantiger 5y ago
        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
    - bryanrasmussen 5y ago
      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 5y ago
        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.