Inheritance passes some computed values from a parent to its children. Other properties use their own initial value unless the cascade supplies a declaration.
Make this comfortable
CSS inheritance and defaults: reset only the property you mean
How the rule works
A case note inherits its text color from the page, while its border does not appear merely because the parent has one. Use inherit when a control should take the current text color; use initial when the specification's initial value is intended. The unset keyword inherits on inherited properties and uses the initial value otherwise. Revert and revert-layer ask the cascade to step back through different boundaries, so they are not generic synonyms for zero. A global reset can remove useful browser defaults such as focus outlines or list markers. Inspect the actual computed style before applying one.
.case-record { color: #21374d; }
.case-record button { color: inherit; }
.case-record .note { border: 1px solid #b7c4d1; }
.case-record .note--plain { border: initial; }Cost and verification
These keywords add negligible transfer and rendering cost. The maintenance risk comes from broad reset rules: a rule that changes every control may silently erase affordances on unrelated routes. In the sample, border: initial removes the border from the plain note, but it does not change the inherited text color. Verify interactive controls with keyboard focus and without custom styles. Where a component needs its own state, declare that state directly rather than relying on a distant ancestor.
Common Mistakes
- Do not assume borders and margins inherit with color.
- Do not use all: unset on a control without rebuilding its visible affordance.
- Do not call initial and inherit interchangeable.
Connected lessons
css
foundations
web