A structured lesson workspace with readable content, hands-on examples, and a clean path to completion.
| Concern | What to inspect | Typical failure |
|---|---|---|
| Core behavior | Naming Conventions and Component Architecture | Names that encode current positioning such as .left-panel-age poorly. The component may move tomorrow. |
| 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 names communicate ownership, state, and variation without encoding layout accidents. 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. Name semantic roles and state rather than current geometry. This keeps the rule understandable when content, theme, or viewport conditions change later.
<style>.card__title { font-size: 1.25rem; }</style><main class="card__title">Example content</main>
Engineering judgment: Name semantic roles and state rather than current geometry.
<style>.button--danger { background: #b91c1c; color: white; }</style><main class="demo"><button type="button">Example action</button></main>
A good CSS change narrows the problem. Name semantic roles and state rather than current geometry. This keeps the rule understandable when content, theme, or viewport conditions change later.
<style>.is-active { outline: 2px solid currentColor; }</style><main class="is-active">Example content</main>
Example 3 is useful here because it demonstrates naming conventions and component architecture under a concrete input rather than as an abstract property list.
<style>[data-state="open"] { display: block; }</style><main class="demo">Example content</main>
Example 4 is useful here because it demonstrates naming conventions and component architecture 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.