Understanding CSS Cascade Layers

Introduction

CSS specificity has always been a source of friction. The moment a codebase grows beyond a single author, the temptation to add !important or reach for increasingly specific selectors creeps in. Cascade layers, introduced with broad browser support in 2022, offer a structural solution.

What are cascade layers?

A cascade layer is a named bucket in the CSS cascade. Within each layer, specificity works exactly as you'd expect. But between layers, the layer order determines precedence — not specificity.

This is the key insight: a class selector in a higher-priority layer will always win over an ID selector in a lower-priority layer, regardless of specificity.

Layers let you reason about your CSS at the system level, not the selector level.

Declaring layer order

The layer order is established by the first @layer declaration encountered by the parser. This starter declares layer order in main.css:

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

Later layers override earlier ones. So utilities — placed last — will always win over components, which will win over base styles, and so on. This is intentional. Utilities are escape valves; they should beat everything.

Layers with design tokens

Placing your CSS custom properties inside a tokens layer has a useful side effect: components in the components layer that reference those variables can be overridden in the utilities layer — all without specificity battles.

A practical example

Consider a .card component that has a default background. A utility class can override it cleanly:

/* components layer */
.card {
  background-color: var(--surface-raised);
}

/* utilities layer — always wins */
.bg-sunken {
  background-color: var(--surface-sunken);
}

Without layers, this would require careful specificity management. With layers, the outcome is predictable by rule.

Where utilities fit

This starter uses a hybrid composition model: semantic component classes for complex, stateful patterns; utilities for single-purpose overrides like spacing, color, and typography adjustments. Utilities in the utilities layer are the highest-specificity bucket in normal flow.

Summary

Cascade layers give you a clear mental model for how styles relate to each other at the system level. The five-layer stack in this starter — reset, tokens, base, components, utilities — covers most real-world needs without overcomplicating the architecture.

Next, explore how the three-tier token system maps onto this layer structure, and how dark mode becomes a single semantic concern rather than a scattered set of overrides.