@layer order
The first declared layer order defines priority between layers.
Platform under construction
Cascade Layers
Cascade layers let you define priority between groups of CSS before specificity gets involved. They are a modern way to make large stylesheets calmer.
@layer reset, base, components, utilities;
@layer components { .button { color: white; } }
@layer utilities { .text-accent { color: #8cffc1; } }
Cascade & Control
Cascade layers make stylesheet priority explicit.
Cascade layers are created with @layer. They let you say which group of CSS should have priority over another group.
This is different from specificity. A low-specificity rule in a later-priority layer can beat a higher-specificity rule in an earlier layer.
Layers are useful when a project has resets, base styles, components, utilities or third-party CSS. They make the architecture visible instead of relying only on selector weight and file order.
Lower layer
Useful for reset and base styles that should be easy to override.
Higher layer
Useful for components, utilities or controlled overrides.
Specificity still exists
Specificity decides inside the same layer, not across layer priority.
Visual model
Control CSS by understanding the browser decision path.
The browser does not apply styles emotionally. It follows a priority system. These diagrams make that priority visible before you start changing declarations.
reset
Normalize browser differences and low-level defaults.
base
Set typography, body, links and document defaults.
components
Style buttons, cards, nav and forms.
utilities
Small purposeful overrides with clear names.
Examples
Write CSS that wins for a reason.
Layer order is clear
@layer reset, base, components, utilities;
@layer base {
a { color: #62d5ff; }
}
@layer components {
.button { color: #061018; }
}
@layer utilities {
.text-accent { color: #8cffc1; }
}
Layer order hidden or accidental
@layer components { .button { color: white; } }
@layer base { a { color: blue; } }
@layer randomFixes { .button { color: red; } }
/* Nobody knows which layer should own the decision. */
Rules that matter
Control comes from reducing surprise.
CSS becomes easier when every override has a reason. If a rule wins by accident, the next developer has to debug your intention instead of the code.
Declare layer order early
Put @layer reset, base, components, utilities near the top.
Use layers for responsibility
A layer should describe a purpose, not a random folder name.
Do not over-layer small sites
Layers help when CSS has enough scale to need priority control.
Remember layer priority beats specificity
A simple utility in a later layer can beat a complex selector in an earlier layer.
Keep third-party CSS low
Vendor styles can live in a lower layer so your site CSS can override them cleanly.
Document your layer model
Developers should know where a new rule belongs.
Production thinking
The cascade is architecture, not trivia.
Why does this matter?
Layers move CSS architecture from hidden convention into actual browser behavior. That is huge for larger projects where resets, components and utilities need predictable priority.
Accessibility
Put accessibility utilities or focus-state protections in a predictable layer so component rules do not accidentally erase them.
Production note
Cascade layers are production-ready in modern workflows, but you should still check browser support requirements for your audience.
SEO note
Layered CSS helps maintain stable interfaces. Stable, usable interfaces support the content experience that search engines indirectly reward.
Live code lab
Change the CSS and watch the interface respond.
The preview runs in an isolated iframe. Links and forms stay inside the practice area, so you can experiment without leaving the lesson.
Mini assignment
Try this now.
- Swap the order to @layer utilities, components and run the preview.
- Add a color declaration in @layer base and predict whether it wins.
- Explain why layer priority is not the same as selector specificity.
Practice assignment
Do this before moving to the next lesson.
- Create a reset, base, components and utilities layer.
- Put one rule in each layer.
- Create a conflict and explain which layer wins.
Try it yourself
Make a utility layer beat a component rule
Self-check
Before you continue, prove that you understand Cascade Layers.
Answer these questions before moving on. If the answer is vague, inspect the lab example and trace which declaration wins.
- Can you explain what @layer controls?
- Can layer priority beat specificity?
- Can you choose sensible layer names for a project?
- Can you place third-party CSS in a safer layer?
- Can you avoid using layers when a small site does not need them?
Senior audit upgrade
Layer order is not ordinary source order.
Cascade layers make architecture visible, but they introduce a key nuance: unlayered normal author styles outrank layered normal author styles.
Declare order early
The first @layer order declaration defines layer priority for the project.
Unlayered styles
Normal declarations outside layers can beat layered normal declarations, even if the layered selector looks stronger.
Important layers
Important declarations reverse some layer ordering expectations, so test important plus layers carefully.
@layer reset, base, components, utilities;
@layer components {
.button { color: white; }
}
.button { color: red; } /* unlayered normal can win */