The relationship between layered and unlayered styles
Managing third-party CSS frameworks with layers
Using nested layers for complex organizations
Differences between layers and traditional specificity
Best practices for layer architecture
When to use layers vs. other cascade control methods
Introduction to Cascade Layers
Cascade layers give you explicit control over CSS priority without resorting to
specificity hacks or !important. They allow you to declare the order in which
groups of styles should apply, making your CSS more predictable and maintainable.
Before cascade layers, managing CSS priority meant carefully balancing selector specificity,
source order, and sometimes using !important. With layers, you can organize your
CSS into named groups and explicitly declare which groups should take priority over others.
Basic Layer Syntax
The @layer at-rule creates a cascade layer. You can declare the order of layers
at the top of your stylesheet, then define the styles within each layer. Layers declared
earlier have lower priority than layers declared later.
In this example, styles in the utilities layer will override styles in
components, which override base, which override reset,
regardless of selector specificity.
Live Example
Layer Priority Order
Understanding layer priority is crucial. Layers follow a specific priority order that
overrides traditional specificity rules. The key principle: later layers win.
Priority Hierarchy (Lowest to Highest)
/* Priority order from lowest to highest: */
@layer reset, base, components, utilities;
/* 1. reset - lowest priority */
/* 2. base */
/* 3. components */
/* 4. utilities - highest layer priority */
/* 5. unlayered styles - higher than any layer! */
/* 6. inline styles - higher still */
/* 7. !important (in reverse order) */
Visual Priority Demonstration
Unlayered Styles
Any CSS that's not explicitly placed in a layer is considered unlayered.
Unlayered styles have higher priority than all layered styles, regardless of
specificity or which layer they're competing with.
One of the most powerful use cases for cascade layers is managing third-party CSS frameworks
like Bootstrap, Tailwind, or Material UI. By placing framework CSS in a low-priority layer,
you can easily override it without specificity battles or !important.
Layers can be nested within other layers for better organization. This is particularly useful
for large frameworks or design systems that need internal organization while remaining isolated
from other styles.
Nested layers inherit the priority of their parent layer. Within framework,
the internal layers follow their own priority order. The entire framework layer
can then be positioned relative to other top-level layers.
Live Example
Layers vs. Specificity
Cascade layers fundamentally change how CSS priority works. Understanding the relationship
between layers and specificity is crucial for using them effectively.
Key Differences
Between layers: Layer order determines priority, specificity is ignored
Within a layer: Normal specificity rules apply
Unlayered styles: Beat all layers, then use specificity
!important: Reverses layer order (lowest layer wins with !important)
Example: Layer Beats Specificity
@layer low, high;
@layer low {
#super-specific .very .specific .selector {
/* Very high specificity, but low layer */
color: red;
}
}
@layer high {
.simple {
/* Low specificity, but high layer */
color: blue; /* This wins! */
}
}
Practical Layer Architecture
A well-designed layer structure makes your CSS predictable and maintainable. Here's a
recommended architecture for large projects, ordered from lowest to highest priority.