250
CSS specificity
also the cascade, cascade layers
When two rules match, specificity and order decide. Adding !important is not a decision.
What is CSS specificity?
The cascade picks a value from origin, importance, specificity, and source order. An id beats a class. An inline style beats a stylesheet. Cascade layers (@layer) let you rank whole stylesheets instead of arming every selector. A more specific selector to “win” against your own rule is a knot.
Why does CSS specificity matter when vibe coding?
The draft cannot override a style, so it adds an id, then !important, then an inline style. The next change needs a stronger one. Nobody can tell which rule is supposed to own the color.
How do you do CSS specificity?
One class, low specificity. Use layers for third-party versus app styles. Delete the losing rule instead of outranking it. Keep !important for the rare case you can name.
How do you ask a model for CSS specificity?
Style (element) with one class. Do not add an id or !important to win. If a third-party sheet conflicts, put it in a lower cascade layer. Remove the rule you are fighting.
What goes wrong with CSS specificity?
A utility class and a BEM class on the same node, both setting color, and the winner depends on import order that a bundler can change.