Utility-first: composing small classes
Each class does one job, and the HTML describes the look. This is the idea behind Tailwind, which generates classes like these for you (Topic 11.5).
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
gap: 12px
padding: 16px