@layer: explicit cascade priority

The cascade you control instead of fight

@layer reset, base, components, utilities;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
}

@layer base {
  body { font-family: system-ui, sans-serif; }
  a { color: #3B82F6; }
}

@layer components {
  .card { padding: 16px; border-radius: 8px; }
}

@layer utilities {
  .text-center { text-align: center; }
}

The order at the top declares priority: utilities > components > base > reset. Unlayered styles WIN over layered ones — like an "unlayered" implicit top.

Why this beats specificity wars

Before @layer, you needed !important to override Bootstrap from your code. Now:

@layer bootstrap { /* their styles */ }
@layer overrides { /* yours, always wins */ }

Your overrides ALWAYS beat bootstrap's, regardless of specificity inside each layer. No !important needed.

The classic "5-layer" project structure

1. @layer reset — the modern reset (box-sizing, margin: 0).
2. @layer base — element defaults (body, h1, a).
3. @layer tokens — custom properties (:root variables).
4. @layer components — .card, .button, .alert.
5. @layer utilities — Tailwind-style atomic classes.

Decide the order ONCE at the top of your main stylesheet. The rest of the project is conflict-free.

Browser support

All evergreen browsers since 2022. Safe everywhere.