FrontendHaltCSS·Advanced·Scenario based·1 min read
How do cascade layers help design systems?
Short interview answer
Layers define precedence between groups such as reset, components, and utilities without increasing selector specificity. Normal declarations in later layers beat earlier layers; unlayered author styles have precedence over normal layered author styles.
Example
@layer reset, components, utilities;
@layer components { .btn { padding: 8px 16px; } }@layer utilities { .p-0 { padding: 0; } }/* .p-0 wins over .btn regardless of specificity — later layer */Key takeaway
Explain the underlying mental model clearly, then support it with a concrete example and its trade-offs.