Controlling specificity without !important
The old way was stacking more specific selectors or throwing !important. @layer lets you decide order without fighting specificity.
Code Comparison
✕ Old
Specificity wars
1.card .title { font-size: 1rem; }
2.page .card .title { font-size: 1.25rem; }
3.page .card .title.special { color: red !important; }
// More specific selectors or !important to override
2.page .card .title { font-size: 1.25rem; }
3.page .card .title.special { color: red !important; }
// More specific selectors or !important to override
✓ Modern
4 lines
1@layer base, components, utilities;
2
3@layer utilities {
4 .mt-4 { margin-top: 1rem; }
5}
2
3@layer utilities {
4 .mt-4 { margin-top: 1rem; }
5}
Why the modern way wins
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.
Browser Support
95%
Lines Saved
N/A
Clear structure
Old Approach
!important, specificity
Selector arms race
Modern Approach
@layer order
Declared priority
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.