Layers: a utility beats a stronger component selector
Layer order is checked before specificity, so .text-red (0,1,0) beats #pricing .card .title (1,2,0). The unlayered .card rule at the bottom would beat all three layers if they set the same property.
Large CSS stays manageable when every rule has an obvious home and predictable strength: a reset or normalise base, components named with a convention like BEM or scoped by a tool, optional utility classes, and cascade layers that fix the order between them.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 6 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write BEM CSS and HTML for an alert with a message and a close button, and a danger variant.
Set up layers so a reset, a component and a utility all style h2, and the utility wins even though the component's selector is more specific.
Explain it without notes
Why does CSS become hard to maintain in large projects?
Explain BEM with an example. What problems does it solve?
Compare utility-first CSS with component classes. When would you choose each?
What is the difference between a reset and normalize.css? What does a modern reset include?
How do cascade layers help organise a CSS codebase?
Preview
Console
Nothing logged yet.Expected console output
component: rgb(0, 0, 128)
with utility: rgb(220, 20, 60)
h2 margin from reset: 0px