Modern CSS Authoring
Cascade Layers
Organize style origins into an explicit priority order without inflating selector specificity. You will define a layer order, place first- and third-party styles, understand unlayered rules, and see why important declarations reverse the order.
Cascade layers provide an explicit priority order between groups of author styles. A later normal layer can override an earlier one without requiring a more specific selector.
Stylesheets often contain categories with different authority: reset rules, base elements, components, utilities, and emergency overrides. Without layers, those categories compete mainly through specificity and source position. Declaring the order once makes the intended relationship visible and stable even when files are bundled differently. This topic also connects with Cascade & Inheritance and CSS Specificity.
Declare the order before the rules
Example
css
@layer reset, base, components, utilities, overrides;
@layer base {
a { color: #075985; }
}
@layer components {
.button { color: white; background: #075985; }
}Normal declarations in a later layer outrank normal declarations in an earlier layer, regardless of selector specificity. Unlayered normal author styles outrank all layered normal author styles.
Important declarations reverse layer order
For !important, earlier layers outrank later ones. This protects foundational important rules, such as accessibility safeguards, from later overrides.
Third-party CSS belongs in a layer
Example
css
@import url("vendor.css") layer(vendor);
@layer vendor, components, utilities;Layer Syntax
| Syntax | Purpose | Example |
|---|---|---|
| Layer order statement | Declares layer priority before rules are added. | @layer reset, base, components |
| Layer block | Adds rules to a named layer. | @layer components { ... } |
| Layered import | Imports a stylesheet into a layer. | @import url("theme.css") layer(theme) |
| revert-layer | Rolls a property back to the previous layer. | color: revert-layer |
Complete Example
Run the complete document below in the Try It editor. Resize the preview or interact with the controls where the example calls for it.
Complete runnable example
html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Cascade Layers example</title>
<style>
* { box-sizing: border-box; }
body {
margin: 0;
padding: 2rem;
font-family: system-ui, sans-serif;
line-height: 1.5;
}
main { max-width: 70rem; margin-inline: auto; }
article, section, aside, form, .card, .panel {
padding: 1rem;
border: 1px solid #cbd5e1;
border-radius: 0.6rem;
}
@layer reset, base, components, utilities, overrides;
@layer base {
a { color: #075985; }
}
@layer components {
.button { color: white; background: #075985; }
}
@import url("vendor.css") layer(vendor);
@layer vendor, components, utilities;
</style>
</head>
<body>
<main><h1>Layer order</h1><p><a href="#">Base link</a></p><button class="button">Component button</button></main>
</body>
</html>Browser Support
Feature | Chrome | Edge | Firefox | Safari |
|---|---|---|---|---|
| @layer | 99 | 99 | 97 | 15.4 |
Versions show the first stable desktop release with unprefixed support. Data source: MDN Browser Compatibility Data 8.0.8. A partial-support note is included where it changes how the example behaves.
Notes
- Layers solve priority between categories of CSS. They do not replace good component boundaries or thoughtful selectors.
- Test the example with real content, keyboard input, browser zoom, and the narrowest layout your project supports.
- Use a fallback when the support table shows that one of your required browsers predates the feature.
Conclusion
Layers define priority between categories of CSS without starting a specificity contest.
Choose a small layer model that reflects real ownership and declare its order before loading the rules. Keep selectors simple inside each layer. Remember that unlayered normal rules sit above layered normal rules and that important declarations reverse the layer priority.