| description | Use when a CSS rule that should clearly win does not (style not applying despite higher specificity), when `!important` is being escalated as a fix-everything hammer (you are about to lose a specificity war by joining it), when an unlayered author rule mysteriously beats a layered author rule (unlayered ALWAYS wins for normal declarations regardless of specificity), when a layer order seems "inverted" for `!important` declarations (it IS inverted; earlier layers win for important), when an `@scope`-anchored rule beats a deeper-DOM normal rule (scoping proximity overrides source order), when DevTools shows a rule struck through with no obvious reason, when `:where(.a, .b)` "loses" its specificity, when `:is(.a, #b)` "wins" too aggressively, when an ID selector creates a 1-0-0 specificity trap that nothing else can override, or when removing a class makes a different rule appear (cascade order, not the class, was the deciding factor). Prevents `!important` chains used to win specificity battles (they only escalate), mixing unlayered and layered CSS expecting source order to decide (unlayered wins for normal regardless), assuming `!important` follows the same layer order as normal (it is REVERSED; earlier layer wins for important), using `:where(:not(.exclude)) .selector` and being surprised by zero specificity on the whole compound (`:where` zeros its argument and everything inside), using `:is(.a, .b#id)` and being surprised the rule wins everywhere (`:is` adopts the HIGHEST specificity of its arguments, the ID in this case), shipping ID-based styling (`#foo { ... }`) and discovering nothing else short of `!important` overrides it, inline-style overrides scattered across components creating untrackable computed-value lookups, expecting an `@scope` rule with deep DOM proximity to lose to a deeper DOM normal rule (scope proximity overrides source order), and removing a class hoping a rule "goes away" when in fact a lower-specificity but later rule was always the deciding factor. Covers the full cascade sort order (Relevance, Origin + Importance, Layers, Specificity, Scoping Proximity, Source Order), the specificity calculation (ID column 1-0-0, CLASS/attr/pseudo-class column 0-1-0, TYPE/pseudo-element column 0-0-1; inline acts as a higher tier but is overridden by `!important`), the `:where()` zero-specificity rule and the `:is()` adopt-highest rule, the `:not()` inheritance rule (takes argument specificity), the layer order rules for NORMAL declarations (unlayered > later-declared > earlier-declared) and the REVERSED rules for `!important` (earlier-declared layer > later-declared layer > unlayered), the user-agent / user / author origin order (and its `!important` inversion that lets a user `!important` override author `!important`), the `@scope` proximity rule (closest scope root wins; overrides source order), the four cascade-control keywords `inherit` / `initial` / `unset` / `revert` plus the layer-aware `revert-layer`, and the DevTools workflow for diagnosing cascade conflicts (Styles panel struck-through rules, Computed tab, Cascade Layers indicator). Keywords: cascade conflicts, cascade sort order, CSS specificity, specificity calculation, ID specificity, class specificity, type specificity, inline style override, important keyword, important inversion, important reversal, important and layers, layer order, layered vs unlayered, unlayered wins, cascade origin, user-agent origin, user origin, author origin, at-layer, at-scope, scope proximity, scoping proximity, where pseudo-class, is pseudo-class, not pseudo-class, has pseudo-class specificity, source order, declared order, inherit keyword, initial keyword, unset keyword, revert keyword, revert-layer keyword, DevTools Styles panel, DevTools Computed tab, struck-through rule, Cascade Layers indicator, style not applying, my CSS does not override, important not winning, computed wrong color, layer not winning, specificity war, important everywhere, rule not applying, computed style wrong, how do I fix CSS overriding, why is my CSS ignored, when to use important, debug … |
