cascading-specificity-guardlisted

# Cascading Specificity Guard Every stylesheet past a few dozen rules develops the same disease: a component rule (`.profile-card { gap: 1rem }`) beats a layout utility (`.gap-wide { gap: 4rem }`) because it was written later or has a longer selector, someone adds `!important` to the utility, then a *component* needs to override *that*, and the cascade turns into an arms race. The fix isn't discipline about selector length — it's putting the rules into named tiers whose precedence is declared once, up front, and can't be changed by source order or specificity. CSS `@layer` does exactly that. Rules in a later-declared layer beat rules in an earlier one *regardless of specificity or order within the file*. Declare the tiers, put every rule in the right one, and utilities win by construction. ## The four tiers ```css @layer base, layout, components, utilities; /* first line; precedence goes left → right */ ``` | Layer | Holds | Why it's here | |---|---|---| | `base` | Reset/normalize, element defaults (`body`, `h1`, `p`, `a`, `button`), typography defaults | Lowest authority — anything more specific should be able to override an element default | | `layout` | Grid tracks, container caps, section rhythm, the editorial rail, flex distributions | Structure sits under components but above resets | | `components` | Cards, pills, forms, nav, accordions — things with a class and a look | Most of the CSS lives here; it should never be able to break structure below or utilities ab