How do cascade layers change precedence?

Cascade layers add a step to the cascade that runs before specificity. A rule in a later-declared layer beats any rule in an earlier layer, regardless of selector specificity. Within a single layer, normal specificity and source order apply as usual.

Where do unlayered styles rank?

Unlayered styles — ordinary rules outside any @layer — are treated as the highest-priority normal layer. They beat all layered normal rules no matter the specificity. This lets a stylesheet keep authoritative overrides outside layers while organising the bulk of styles into ordered layers.

Does !important reverse layer order?

Yes. For important declarations the layer order is inverted: an !important rule in the earliest layer wins over an !important rule in later layers, and important unlayered styles rank lowest among important normal styles. This mirror keeps base resets able to enforce critical rules.

How do I assign an import to a layer?

Use @import url("file.css") layer(name); to place an entire imported stylesheet into the named layer, or layer; with no name to put it in a new anonymous layer. The @import (with any layer) must appear before other rules except @charset and earlier @import.

What does revert-layer do?

The revert-layer keyword rolls a property's value back to what it would have been from previous (lower-priority) cascade layers, ignoring the current layer's declaration. It is like revert but scoped to the layer stack rather than the whole origin.

CSS @layer Reference

Email me this result

Get this tool's output sent to your inbox, plus one useful tool a week. No spam, unsubscribe any time.

Organising the cascade with @layer

CSS cascade layers let you split a stylesheet into explicitly ordered groups so that source order and specificity no longer decide everything. A rule in a later layer beats one in an earlier layer regardless of specificity — making resets, frameworks and overrides predictable. This reference covers the at-rule forms and the precedence rules.

How it works

Declare the layer order once with a statement-form @layer, then add rules with the block form. Order is set by first appearance, so an upfront declaration is the safest pattern:

@layer reset, base, components, utilities;   /* fixes precedence */

@layer reset { * { margin: 0; } }
@layer base { a { color: blue; } }
@layer utilities { .text-red { color: red; } }   /* wins over base */

@import url("framework.css") layer(base);
@import url("theme.css") layer();   /* anonymous layer */

For normal declarations a later layer wins; unlayered rules outrank all layers. For !important declarations the order inverts — the earliest layer wins — and important unlayered styles rank lowest.

Tips and notes

Declare the order upfront so import position cannot reshuffle layers.
Unlayered styles always beat layered normal styles — keep ad-hoc overrides there.
Nest layers with @layer outer { @layer inner { ... } } or outer.inner.
Use revert-layer to fall back to lower layers for one property.