Как работает наследование CSS со вложенными элементами?

Наследование CSS со вложенными элементами

Наследование в CSS — это механизм, при котором дочерние элементы автоматически получают значения некоторых CSS свойств родителя, если эти свойства явно не переопределены.

Какие свойства наследуются?

Наследуемые свойства в основном связаны с текстом и шрифтами:

Основные наследуемые свойства:

• color — цвет текста
• font-family, font-size, font-weight, font-style — всё, что касается шрифтов
• line-height — высота строки
• text-align, text-transform — стилизация текста
• letter-spacing, word-spacing — расстояния между символами
• visibility — видимость элемента
• opacity — прозрачность (частично)
• cursor — стиль курсора
• list-style — стиль списков

НЕ наследуются:

• margin, padding — отступы
• border, background — границы и фон
• width, height — размеры
• position, display, flex, grid — раскладка
• box-shadow, text-shadow — тени

Как это работает на практике

// HTML
<div class="parent">
  <p>Текст наследует свойства</p>
  <span>И этот тоже</span>
</div>

// CSS
.parent {
  color: blue;
  font-size: 16px;
  margin: 20px; /* НЕ наследуется */
}

// Результат:
// <p> и <span> будут синего цвета, 16px
// Но margin 20px НЕ передастся дочерним элементам

Специальные значения CSS

• inherit — явно наследовать значение от родителя, даже если оно обычно не наследуется
• initial — сбросить на значение по умолчанию
• unset — сбросить на наследуемое значение (если наследуется) или на initial
• revert — вернуть браузерное значение по умолчанию

.child {
  margin: inherit; /* Явно берём margin родителя */
  color: initial; /* Сбрасываем цвет на чёрный (default) */
  padding: unset; /* Сбрасываем, если не наследуется */
}

Приоритет CSS каскада

Специфичность работает важнее наследования:

.parent {
  color: blue; /* Низкая специфичность */
}

.child {
  color: red; /* Высокая специфичность — красный выиграет */
}

Практические примеры

Пример 1: font-size наследуется относительно

body {
  font-size: 16px;
}

.parent {
  font-size: 1.5em; /* 24px (16px × 1.5) */
}

.child {
  font-size: 1em; /* 24px — наследует от parent, не от body! */
}

Пример 2: Блокирование наследования

.parent {
  color: blue;
}

.child {
  color: green; /* Переопределяем наследуемое значение */
}

.grandchild {
  /* Будет зелёный, наследует от child */
}

Практические советы

1. Используй наследование для текстовых свойств на уровне body или контейнеров
2. Если нужно наследовать необычное свойство — используй inherit
3. Помни о каскаде: специфичность всегда сильнее наследования
4. Используй CSS переменные (--my-color) для переиспользуемых значений вместо наследования
5. Не полагайся на наследование для разметки и размеров — лучше явно указывай

Наследование — мощный инструмент, который помогает писать DRY CSS и снижает количество повторяющихся правил.