Inheritance

Inheritance lets selected properties flow from parent to child. Text-related properties (color, font-family, line-height) often inherit; layout properties (margin, width, display) usually do not. Custom properties inherit by default unless registered otherwise.

Reset keywords control cascade re-entry:

• `inherit` — take parent computed value
• `initial` — spec default (may differ from browser default)
• `unset` — inherit if inheriting, else initial
• `revert` — user-agent stylesheet level
• `revert-layer` — undo within current @layer

					.card {
  --card-bg: var(--surface, #fff);
  color: var(--text-primary);
}
.card--danger {
  --card-bg: var(--danger-surface);
  color: inherit; /* still follows parent text color if needed */
}
				

On interviews: explain why color inherits but margin does not, and how custom properties cross component boundaries for theming.

The trade-off is convenient theming through inheritance versus accidental style leakage across component boundaries.

Common pitfalls: assuming every property inherits causes layout bugs; aggressive resets remove helpful user-agent form and focus styles.

Checklist:

• Know inheriting versus non-inheriting families.
• Use reset keywords deliberately.
• Scope custom properties with semantic names.
• Avoid broad destructive resets.