Cascade layers let you declare the order in which groups of styles compete, independent of selector specificity. This makes it possible to write low-specificity selectors and still override a framework cleanly, without fighting !important or deep chains.
Before you start
You should understand specificity and the cascade. This article covers @layer and its precedence.
Step-by-step walkthrough
Step 1: Declare the layer order
@layer reset, base, components, utilities; sets the precedence: later layers win over earlier ones, regardless of selector specificity within them. So a components rule beats a base rule even if the base selector is more specific.
Step 2: Put framework styles in early layers
Loading a framework into a low-priority layer lets your own layers override it without matching its specificity. This removes the need to out-specify the framework and keeps your selectors simple, which is the main practical benefit.
Step 3: Know where unlayered styles sit
Unlayered styles have the highest priority among normal declarations, beating every layer. That means stray rules you did not put in a layer can unexpectedly override your layer order, so be deliberate: put everything in layers, or use unlayered styles only for a final override.
Worked scenario
Layer order decides the winner, not specificity.
@layer base, components;
@layer base {
.card .title { color: black; } /* more specific */
}
@layer components {
.title { color: navy; } /* wins: later layer */
}Walk through the example
Even though .card .title is more specific, .title in components wins because components is declared later. Specificity only breaks ties within the same layer. This is what lets you keep selectors flat while still controlling which styles apply.
Common mistake
Mixing layered and unlayered styles and being surprised when the unlayered ones win, or assuming specificity beats layer order within the cascade. Another is !important by habit, which reverses layer precedence for important declarations.
Verify the behavior
Create two layers with conflicting rules and confirm the later layer wins regardless of specificity. Add an unlayered rule and confirm it overrides both. Move a framework into an early layer and confirm your later layer overrides it.
Interview exercise
How do cascade layers change the specificity fight?
Answer and reasoning
They replace it with an explicit order. Within a layer, specificity still decides ties, but between layers, order decides regardless of specificity, so a simple selector in a later layer beats a complex one in an earlier layer. That lets you override a framework without escalating specificity or using !important.
Continue learning
Compare precedence in Cascade, specificity, box model and variables in Custom properties. Read the MDN cascade layers documentation and try the HTML and CSS interview questions.