Q25: What are CSS Cascade Layers (@layer) and how do they manage priority?
Cascade Layers (@layer) allow developers to control CSS override priority explicitly regardless of selector specificity. Code defined in later layers takes precedence over earlier layers. Unlayered styles always override layered styles.
Ordering Cascade Layers
/* Establish layer priority order */
@layer reset, base, components, utilities;
@layer components {
#widget .btn { background: red; }
}
@layer utilities {
.bg-green { background: green; }
}💡 The utilities layer takes precedence over components, overriding background color despite lower class specificity.
Key Takeaways
- Defines explicit order of precedence across design system stylesheets.
- Unlayered CSS rules always override layered selectors.
Knowledge Check
Which CSS rule takes priority when conflicting layer definitions exist?