Lowering the specificity of multiple rules at once - Manuel Matuzovic

"You probably already knew that you can use :where() to lower the specificity of a single selector, but did you know that you can achieve a similar effect on multiple rules at once? The other day, I had an Aha! moment when someone suggested something I knew existed but hadn't considered using. In my reset style sheet UA+, I used :where() for combined selectors to keep specificity low. Here's an example: :where(abbr[title]) { cursor: help; text-decoration-line: underline; text-decoration-style: dotted; }"

"Someone suggested using it everywhere for consistency and to achieve the lowest possible specificity for all rules. I liked the idea and wrapped all selectors in :where(). :where(h1) { font-size: 2em; margin-block: 0.67em; } This change improved usability but reduced readability. It was like that for a while until Emilio asked why I didn't wrap everything in an anonymous @layer instead."

"Let's say you don't have any cascade layers in your CSS. By adding a third-party file containing all rules nested in a layer, all your rules will override the rules within that layer, since unlayered rules have precedence over layered ones. /* uaplus.css */ @layer { h1 { color: red; } } /* your.css */ h1 { color: blue; } /* Result: blue */ Of course, that's only the case as long as I'm not using !important in UA+."

Using :where() reduces selector specificity and can be applied to combined selectors to keep specificity low. Wrapping many selectors in :where() achieves minimal specificity but can harm readability. An anonymous @layer can contain reset or third-party rules so that normal unlayered author rules override those layered rules. Unlayered rules have precedence over layered rules regardless of stylesheet inclusion order. The override behavior holds unless !important is used in the layered rules. Nesting reset rules in an anonymous @layer preserves readability while maintaining predictable cascade behavior.

Read at Manuel Matuzovic