Inheritance

Inheritance передаёт выбранные свойства от родителя к потомку. Текстовые свойства (color, font-family, line-height) часто наследуются; layout (margin, width, display) — обычно нет. Custom properties наследуются по умолчанию, если не зарегистрированы иначе.

Ключевые слова сброса управляют повторным входом в cascade:

• `inherit` — computed value родителя
• `initial` — значение по спецификации
• `unset` — inherit, если свойство наследуемое, иначе initial
• `revert` — уровень user-agent stylesheet
• `revert-layer` — откат внутри текущего @layer

					.card {
  --card-bg: var(--surface, #fff);
  color: var(--text-primary);
}
.card--danger {
  --card-bg: var(--danger-surface);
  color: inherit;
}
				

На интервью: почему color наследуется, а margin нет, и как custom properties пересекают границы компонентов для темизации.

Компромисс: удобная темизация через наследование против случайной утечки стилей через границы компонентов.

Типовые ошибки: предположение что всё наследуется ломает layout; агрессивный reset убирает полезные стили форм и focus от user agent.

Чеклист:

• Знайте наследуемые и ненаследуемые семейства свойств.
• Reset keywords — осознанно.
• Custom properties с semantic именами.
• Избегайте широкого разрушительного reset.