Cascade Layers (@layer)
Cascade layers (@layer) let you control the order of CSS specificity in a structured way. Define layers for resets, base styles, components, and utilities - each layer has its own specificity priority regardless of selector specificity within it.
Cascade Layers
- @layer reset, base, components, utilities - Declare layer order upfront. Last layer has highest priority
- @layer base { } - Add styles to a named layer
- Layer priority - Styles in later layers override earlier layers, regardless of selector specificity
- Unlayered CSS - CSS not in any layer has the HIGHEST priority. It always wins over layered styles
- Third-party resets - Put normalize.css or reset.css in an early layer. Your styles always override them
- @import with layers - @import url('reset.css') layer(reset). Import directly into a layer
- Benefits - No more specificity wars with CSS frameworks. Layer order = priority order
Cascade Layers Code
/* Declare layer order */
@layer reset, base, components, utilities;
/* Reset - lowest priority */
@layer reset {
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
}
/* Base - typography, global styles */
@layer base {
body {
font-family: 'Inter', sans-serif;
line-height: 1.6;
color: #333;
}
a { color: #667eea; }
}
/* Components - UI elements */
@layer components {
.btn {
padding: 12px 24px;
border-radius: 8px;
cursor: pointer;
}
.card {
background: white;
border-radius: 12px;
padding: 24px;
}
}
/* Utilities - highest priority (overrides components) */
@layer utilities {
.text-center { text-align: center; }
.mt-4 { margin-top: 1rem; }
.hidden { display: none; }
}Tip
Put third-party CSS (Bootstrap, Tailwind, normalize) in an early @layer. Your component styles in a later layer always win - regardless of selector specificity. No more !important hacks to override framework styles.
The cascade determines which style wins when multiple rules conflict
Common Mistake
CSS NOT inside any @layer has the HIGHEST priority - it always beats layered styles. If you accidentally leave some styles unlayered, they'll override everything. Be consistent: put ALL your CSS in layers once you start using @layer.
Practice Task
Set up a layer architecture: (1) @layer reset, base, components, utilities; declared at the top, (2) Put your CSS reset in @layer reset, (3) Component styles in @layer components, (4) Utility overrides like .hidden in @layer utilities (highest priority).
Quick Quiz
Key Takeaways
- Cascade layers (@layer) let you control the order of CSS specificity in a structured way.
- @layer reset, base, components, utilities - Declare layer order upfront. Last layer has highest priority
- @layer base { } - Add styles to a named layer
- Layer priority - Styles in later layers override earlier layers, regardless of selector specificity