Controlling specificity without !important
The old way was stacking more specific selectors or throwing !important. @layer lets you decide order without fighting specificity.
2
3@layer utilities {
4 .mt-4 { margin-top: 1rem; }
5}
2.page .card .title { font-size: 1.25rem; }
3.page .card .title.special { color: red !important; }
4// More selectors or !important to win
Browser Support for Cascade layers
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2022.
Your first month is free
Managed WordPress hosting for faster sites.
Order over specificity
Later layers win. No need to make selectors more specific to override.
Predictable cascade
base, then components, then utilities. Same order every time.
No !important
Utilities can override components with a single class. Clean and explicit.
How it works
Previously you made selectors more specific (e.g. .page .card .title) or used !important to force overrides. That led to specificity wars and hard-to-debug styles.
@layer base, components, utilities defines the order. Whatever comes later wins when specificity is equal. Put resets in base, components in components, and utility classes in utilities. No !important, no long selectors.