A structured lesson workspace with readable content, hands-on examples, and a clean path to completion.
<style>:root{--space-3:.75rem;}</style><main class="demo">Example content</main>
A good CSS change narrows the problem. Tokens should describe intent, not storage. This keeps the rule understandable when content, theme, or viewport conditions change later.
<style>.button{--button-bg:var(--color-brand);}</style><main class="demo"><button type="button">Example action</button></main>
Engineering judgment: Tokens should describe intent, not storage.
| Concern | What to inspect | Typical failure |
|---|---|---|
| Core behavior | Design Tokens and CSS Variables | Raw color values duplicated across files are a maintenance smell when they represent the same design decision. |
| 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 |
The useful mental model here is practical: how semantic tokens translate a design system into runtime CSS decisions. When a rule looks obvious but the browser produces something else, start by identifying which constraint or rendering phase is actually winning.
A good CSS change narrows the problem. Tokens should describe intent, not storage. This keeps the rule understandable when content, theme, or viewport conditions change later.
<style>.theme-dark{--surface:#0f172a;}</style><main class="theme-dark">Example content</main>
Example 3 is useful here because it demonstrates design tokens and css variables under a concrete input rather than as an abstract property list.
<style>.demo { color:var(--text, #111827); }</style><main class="demo">Example content</main>
Example 4 is useful here because it demonstrates design tokens and css variables under a concrete input rather than as an abstract property list.
Finish the lesson once you have worked through the material. This awards ★ 30 XP.