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.

What is the CSS @layer Reference?

Reference for the CSS @layer at-rule — declaring layer order, layer blocks, layered @import, and how cascade layers interact with specificity and !important. It runs free in your browser on Gera Tools, with nothing uploaded.

CSS @layer Reference

Name: CSS @layer Reference
Creator: Gera Tools
License: https://creativecommons.org/licenses/by/4.0/

Get one useful tool a week

Like this tool? Enter your email and we'll send you one genuinely useful Gera tool a week — plus a link to come back to this one. No spam, one-click 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.

The precedence table

This is the full precedence ranking for normal declarations, from lowest to highest:

Rules in the first-declared layer (e.g. reset)
Rules in the second-declared layer (e.g. base)
Rules in the third-declared layer (e.g. components)
Rules in the last-declared layer (e.g. utilities)
Unlayered rules (highest normal precedence)

For !important declarations, this order completely inverts:

!important unlayered (lowest among important)
!important in the last layer
!important in earlier layers
!important in the first-declared layer (highest among important)

This inversion is deliberate. It allows a base reset layer to enforce critical important rules (such as box-sizing) even if a component layer later adds its own important declarations.

Real-world layering pattern

A practical four-layer setup for a project that adopts a third-party design framework:

/* Declare order upfront, before any @import */
@layer reset, framework, components, utilities;

/* Place the framework in its designated layer */
@import url("tailwind.css") layer(framework);

/* Your components beat the framework regardless of specificity */
@layer components {
  .card { padding: 1.5rem; }
}

/* Utilities beat everything else in normal declarations */
@layer utilities {
  .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; }
}

Any unlayered rule you write after this block beats even the utilities layer, which is a handy escape hatch for genuine one-off overrides without resorting to !important.

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.