HTML & CSS: как не надо • Не дублируйте стили текста

Не дублируйте стили текста

Не нужно задавать разным элементам одинаковые стили текста.

Почему? #

Это не имеет смысла и засоряет код. Воспользуйтесь наследованием: задайте стили для текста родительскому элементу, и дочерние элементы сами их унаследуют, вам не нужно для этого ничего делать.

Как это увидеть? #

В браузере в инструментах разработчика:

Дублирование стилей видно в инструментах разработчика — Все перечёркнутые свойства были унаследованы, но затем перезаписаны точно такими же. Так делать не надо.

А как надо? #

Стили текста достаточно задать один раз в body, и они автоматом применятся ко всем элементам страницы.

Плохо

BODY {
  background: #FFF;
}
.page-main {
  font-family: Georgia, serif;
  font-size: 16px;
  line-height: 1.4;
  color: #333;
}
.news {
  font-family: Georgia, serif;
  font-size: 16px;
  line-height: 1.4;
}
.news-item {
  font-family: Georgia, serif;
  font-size: 16px;
  line-height: 1.4;
  color: #333;
}
.news-item__title {
  font-family: Georgia, serif;
  font-size: 20px;
  line-height: 1.4;
  color: #333;
}
.news-item__content {
  font-family: Georgia, serif;
  font-size: 16px;
  line-height: 1.4;
  color: #000;
}

Хорошо

BODY {
  background: #FFF;
  font-family: Georgia, serif;
  font-size: 16px;
  line-height: 1.4;
  color: #333;
}
.news-item__title {
  font-size: 20px;
}
.news-item__content {
  color: #000;
}

Исправленный код значительно короче, с ним удобнее иметь дело. Также не тратится время на написание ненужных свойств.

Как проверить, что всё работает как надо? Там же, в инструментах разработчика:

Стили не дублируются — На скриншоте видно, что стили текста унаследовались из `body`, а цвет фона — нет (он показан бледным)

Ещё один способ:

Rendered Fonts в инструментах разработчика — Во вкладке Computed поищите конкретные свойства или посмотрите в Rendered Fonts — там показывается какой шрифт в итоге применился к тексту.

Проверяем кастомный шрифт — Там же можно проверить применился ли ваш красивый кастомный шрифт. Не смотря на то, что кастомный `MyFancyFont` объявлен в списке первым, текст в итоге отрисовался запасным — `Georgia`. Значит надо проверить правильно ли подключен кастомный шрифт.

Если для некоторых элементов стили текста отличаются, достаточно переопределить отдельные свойства, а не писать всё заново. Также снижается вероятность ошибки, если потребуется поменять шрифт на всём сайте: это можно будет сделать в одном месте.

Подводные камни #

Стили текста для инпутов и кнопок задаются браузером:

Стили для инпутов в инструментах разработчика — Стили в `body` перечеркнуты, потому что перезаписаны стилями, который задаёт браузер — они отображаются на сером фоне, а в качестве источника указано `user agent stylesheet`.

В Rendered Fonts системный шрифт вместо кастомного — В Rendered Fonts что-то совсем не то, что нужно.

Это легко поправить, задав наследование явно:

input, textarea, select, button {
  font: inherit;
}

Если нужно наследовать только семейство шрифтов, вместо font: inherit; задайте font-family: inherit;

Проверяем наследование стилей для инпутов в инструментах разработчика — Проверяем в Computed: `Georgia`.

Проверяем в инструментах разработчика какие стили и чем перезаписались — Там же можно увидеть что чем перезаписалось.

Итого

Не дублируйте стили текста, они наследуются.
Браузер перезаписывает стили для инпутов и кнопок, пропишите явное наследование.