A structured lesson workspace with readable content, hands-on examples, and a clean path to completion.
<style>.notice { border: 1px solid; }</style><main class="notice">Example content</main>
A good CSS change narrows the problem. A component with a low-specificity API is easier to extend. :where() is valuable when you want a detailed selector with zero specificity. This keeps the rule understandable when content, theme, or viewport conditions change later.
<style>input[type="email"] { padding: .75rem; }</style><main class="demo"><label>Example field <input class="demo-input" type="email"/></label></main>
Engineering judgment: A component with a low-specificity API is easier to extend. :where() is valuable when you want a detailed selector with zero specificity.
| Concern | What to inspect | Typical failure |
|---|---|---|
| Core behavior | Selectors and Selector Specificity | Counting specificity as a single number is misleading. The selector is compared by its ID, class/attribute/pseudo-class, and type components as separate columns. |
| 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. A component with a low-specificity API is easier to extend. :where() is valuable when you want a detailed selector with zero specificity. This keeps the rule understandable when content, theme, or viewport conditions change later.
In production, Counting specificity as a single number is misleading. The selector is compared by its ID, class/attribute/pseudo-class, and type components as separate columns. That is the kind of bug that survives visual spot checks because the stylesheet is syntactically valid while the layout contract is wrong.
<style>#app .notice { color: navy; }.notice { color: teal; }</style><main class="notice">Example content</main>
Specificity comparison is useful here because it demonstrates selectors and selector specificity under a concrete input rather than as an abstract property list.
<style>:where(.card .title) { margin: 0; }</style><main class="card title">Example content</main>
Zero-specificity wrapper is useful here because it demonstrates selectors and selector specificity under a concrete input rather than as an abstract property list.
Finish the lesson once you have worked through the material. This awards ★ 20 XP.