The CSS @layer at-rule
The CSS @layer at-rule creates cascade layers that order your styles by intent — e.g. @layer reset, base, components, utilities;. A rule in a later layer beats one in an earlier layer regardless of specificity, which ends specificity wars and makes it predictable whose styles win. Unlayered styles win over all layers.
Overview
@layer adds a new, higher-priority dimension to the cascade. Normally, when two rules conflict, specificity decides the winner — which is how you end up with selector arms races and a trail of !important. Layers change the rules: declare your layers in order, and a rule in a later layer beats a rule in an earlier layer no matter how specific the earlier one is.
The pattern is to name your layers up front in priority order — @layer reset, base, components, utilities; — then assign rules to them. Now a low-specificity utility in the utilities layer can override a high-specificity component rule simply because its layer comes later. Intent, not selector weight, decides the outcome.
This is transformative for managing CSS at scale, especially third-party code: drop a framework into an early layer and your own styles in a later one, and your overrides just work without !important. One rule to remember: unlayered styles win over all layered styles, so anything not in a layer sits on top of the whole stack.
Syntax
/* declare the order once, up front */
@layer reset, base, components;
@layer base {
a { color: blue; }
}
@layer components {
/* wins because its layer comes later */
a { color: rebeccapurple; }
}Example
<style>
@layer base, theme;
@layer base { .badge { background: #94a3b8; } }
@layer theme { .badge { background: #1c7ce9; } }
.badge { color: #fff; padding: 12px 18px; border-radius: 8px; font: 600 14px system-ui, sans-serif; display: inline-block; }
</style>
<span class="badge">The "theme" layer comes later, so I am blue</span>Best practices
- Declare the full layer order once at the top so priority is explicit and predictable.
- Put resets and third-party frameworks in early layers, and your own overrides in later ones.
- Remember unlayered styles beat every layered style — keep that in mind when something stubbornly wins.
- Combine with
@import url(framework.css) layer(framework)to slot external CSS straight into your layer order.
Frequently asked questions
What does @layer do in CSS?
Do cascade layers override specificity?
How do I set the order of cascade layers?
@layer reset, base, components;. The order listed is the priority order, lowest to highest.