@layer

`@layer` adds an explicit ordering step before specificity. Declare global order once, then assign rules to layers such as reset, base, components, utilities, and overrides.

					@layer reset, base, components, utilities, overrides;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
}
@layer components {
  .btn { padding: 0.5rem 1rem; }
}
@layer utilities {
  .hidden { display: none !important; }
}

/* Unlayered author styles beat all layered normal styles */
.alert { border: 2px solid red; }
				

Low-specificity utilities in a later layer can beat higher-specificity component rules — by design. Unlayered styles outrank layered normal rules, which surprises migrations.

On interviews: how layers differ from source order and why they reduce specificity escalation.

The trade-off is explicit layer governance versus surprise when unlayered styles outrank layered rules.

Common pitfalls: random layer names without governance; dumping new code unlayered during adoption.

Checklist:

• Declare layer order at entry point.
• Place resets and utilities deliberately.
• Know unlayered precedence rules.
• Document override and !important policy.