A structured lesson workspace with readable content, hands-on examples, and a clean path to completion.
| Concern | What to inspect | Typical failure |
|---|---|---|
| Core behavior | Building Reusable Utility Classes | Utilities become hard to reason about when they start carrying component semantics. |
| Production test | Real content and constraints | The rule works only for the demo values |
| Maintenance | Scope and override path | A later fix creates another exception |
A good CSS change narrows the problem. Keep utilities predictable, small, and composable; move product-specific logic into components. This keeps the rule understandable when content, theme, or viewport conditions change later.
<style>.u-stack{display:flex;flex-direction:column;gap:1rem;}</style><main class="u-stack">Example content</main>
Engineering judgment: Keep utilities predictable, small, and composable; move product-specific logic into components.
The useful mental model here is practical: how small single-purpose classes can accelerate composition without becoming a second component framework. When a rule looks obvious but the browser produces something else, start by identifying which constraint or rendering phase is actually winning.
<style>.u-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }</style><main class="u-sr-only">Example content</main>
A good CSS change narrows the problem. Keep utilities predictable, small, and composable; move product-specific logic into components. This keeps the rule understandable when content, theme, or viewport conditions change later.
<style>.u-container{width:min(100% - 2rem,72rem);margin-inline:auto;}</style><main class="u-container">Example content</main>
Example 3 is useful here because it demonstrates building reusable utility classes under a concrete input rather than as an abstract property list.
<style>.u-hidden{display:none;}</style><main class="u-hidden">Example content</main>
Example 4 is useful here because it demonstrates building reusable utility classes under a concrete input rather than as an abstract property list.
Finish the lesson once you have worked through the material. This awards ★ 40 XP.