A structured lesson workspace with readable content, hands-on examples, and a clean path to completion.
<style>.demo { padding-inline: clamp(1rem, 2vw, 3rem); }</style><main class="demo">Example content</main>
In production, calc() does not remove unit rules. Expressions still need compatible dimensions, and division is not a general-purpose CSS operation outside the modern mathematical grammar that supports it. That is the kind of bug that survives visual spot checks because the stylesheet is syntactically valid while the layout contract is wrong.
<style>.demo { width: calc(100% - 2rem); }</style><main class="demo">Example content</main>
Engineering judgment: Use rem and percentages for stable constraints, then add viewport or container terms only where the design actually benefits from fluid behavior.
A good CSS change narrows the problem. Use rem and percentages for stable constraints, then add viewport or container terms only where the design actually benefits from fluid behavior. This keeps the rule understandable when content, theme, or viewport conditions change later.
| Concern | What to inspect | Typical failure |
|---|---|---|
| Core behavior | Units, Values, and CSS Functions | calc() does not remove unit rules. Expressions still need compatible dimensions, and division is not a general-purpose CSS operation outside the modern mathematical grammar that supports it. |
| 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 |
In production, calc() does not remove unit rules. Expressions still need compatible dimensions, and division is not a general-purpose CSS operation outside the modern mathematical grammar that supports it. That is the kind of bug that survives visual spot checks because the stylesheet is syntactically valid while the layout contract is wrong.
<style>.demo { width: min(70rem, 100%); }</style><main class="demo">Example content</main>
Bounded measure is useful here because it demonstrates units, values, and css functions under a concrete input rather than as an abstract property list.
<style>.demo { padding-block: max(1rem, 3vw); }</style><main class="demo">Example content</main>
Lower bound is useful here because it demonstrates units, values, and css functions 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.