The @layer rule introduces explicit layers to the CSS cascade, allowing developers to control style priority by layer order rather than specificity — solving specificity wars in large codebases without resorting to !important.
A rule in a later-declared layer always beats a rule in an earlier layer, regardless of selector specificity — eliminating specificity wars entirely.
Styles not placed in any @layer have the highest priority of all, sitting above every declared layer in the cascade.
Within layers, !important rules have reversed priority — an !important in an earlier layer beats one in a later layer, allowing resets to protect critical styles.
A typical structure orders layers from reset through base, components, utilities, and overrides — mirroring the natural escalation of style specificity in a project.
Cascade Layers, introduced in 2022 and supported in all major browsers, add a new dimension to the CSS cascade between specificity and order of appearance. They are a game-changer for large-scale CSS architecture.
In traditional CSS, when two rules target the same element, specificity determines which wins. In large projects with multiple style sources (reset libraries, component libraries, utility classes, custom styles), specificity conflicts lead to an arms race: developers write increasingly specific selectors or resort to !important to override third-party styles. This makes CSS fragile and hard to maintain.
You declare layers and their priority order in a single statement:
@layer reset, base, components, utilities;Layers declared later in the order have higher priority. A rule in the utilities layer will always beat a rule in the components layer, regardless of specificity. This means a simple .text-red { color: red; } in the utilities layer overrides #sidebar .nav-item.active a { color: blue; } in the components layer.
You assign styles to layers using the @layer block syntax:
@layer components {
.card { background: white; }
}Or inline with @import:
@import url('bootstrap.css') layer(vendor);The cascade evaluates in this order: (1) Origin and importance, (2) Context (Shadow DOM), (3) Layer order, (4) Specificity, (5) Order of appearance. Layers sit above specificity in priority, meaning layer order is checked before specificity is even considered.
Key rules:
@layer framework.components creates a sub-layer!important rules within layers have inverted priority — an !important rule in an earlier layer beats one in a later layer (this is intentional, allowing resets to protect their styles)A common layer structure for a modern project:
@layer reset, tokens, base, components, patterns, utilities, overrides;Tailwind CSS v4 uses cascade layers internally. You can import third-party CSS into a low-priority layer using @import url('lib.css') layer(vendor), ensuring your own styles always take precedence without specificity hacks.
Cascade layers are supported in all modern browsers since early 2022 (Chrome 99, Firefox 97, Safari 15.4). For older browsers, unlayered styles simply work normally — layers degrade gracefully since unsupported @layer rules are ignored.
Cascade layers demonstrate knowledge of modern CSS architecture. Interviewers asking about this topic want to see that you understand the full cascade algorithm and can architect maintainable CSS at scale.
Fun Fact
The @layer proposal was led by Miriam Suzanne, who also co-created the Susy grid library. She described cascade layers as giving CSS the 'z-index for specificity' that developers had been requesting for over a decade.