По мере роста проекта в CSS накапливаются повторы: один и тот же отступ, цвет кнопки или стиль контейнера прописываются снова и снова в десятке мест. Изменить что-то становится мучением — приходится править одно и то же во многих строчках. Решение — выделять переиспользуемые классы и разбивать стили на логические части. Это делает код короче, а изменения — точечными: поменяли в одном месте, применилось везде.

После этого урока вы сможете находить в стилях повторы, выносить их в переиспользуемые классы и организовывать CSS по логическим группам.

Что уже умеем / что добавим

Вы владеете BEM и понимаете специфичность. Теперь научимся не повторяться и структурировать стили. В сквозном проекте мы вынесем общие стили кнопок и контейнера в переиспользуемые классы.

Что вы узнаете в рамках статьи

• Почему повторение в CSS — это проблема.
• Как выносить общие стили в переиспользуемый класс.
• Как сочетать несколько классов на одном элементе.
• Что такое служебные (утилитарные) классы.
• Как разбивать стили на логические группы.

Ключевые термины

• DRY — принцип «не повторяйся» (Don't Repeat Yourself).
• Переиспользуемый класс — класс с общими стилями для многих элементов.
• Утилитарный класс — маленький класс на одно-два свойства.
• Композиция классов — сочетание нескольких классов на элементе.

Проблема повторения

Взгляните на типичную ситуацию: две кнопки, у которых совпадает почти всё, кроме цвета:

.button-submit {
  padding: 0.7rem 1.5rem;
  border: none;
  border-radius: 8px;
  color: white;
  background-color: #1a3c8c;
}

.button-cancel {
  padding: 0.7rem 1.5rem;
  border: none;
  border-radius: 8px;
  color: white;
  background-color: #888;
}

Пять из шести свойств продублированы. Если понадобится изменить скругление всех кнопок, править придётся в двух местах — а в реальном проекте таких кнопок десятки. Это нарушение принципа DRY («не повторяйся»). Повторение — источник ошибок и лишней работы. Разберёмся, как его убрать.

Выносим общее в один класс

Общие свойства выносим в базовый класс, а различия оставляем в отдельных. Затем сочетаем классы на элементе:

.button {
  padding: 0.7rem 1.5rem;
  border: none;
  border-radius: 8px;
  color: white;
}

.button--primary {
  background-color: #1a3c8c;
}

.button--secondary {
  background-color: #888;
}

<button class="button button--primary">Отправить</button>
<button class="button button--secondary">Отмена</button>

Теперь общие стили описаны один раз в .button, а классы-модификаторы задают только цвет. Изменили скругление в .button — оно поменялось у всех кнопок сразу. Это и есть сила переиспользования: меньше кода, проще правки. Заметьте, что мы естественно пришли к BEM-модификаторам из прошлого урока.

Композиция классов

Приём, когда элемент несёт несколько классов, каждый со своей задачей, называют композицией. Один класс отвечает за одно, другой — за другое, и вместе они складываются в итоговый вид:

<button class="button button--primary">Отправить</button>

Здесь button даёт форму и размер, button--primary — цвет. Их можно комбинировать в любых сочетаниях: button button--secondary, button button--large и так далее, не переписывая общие свойства. Композиция — гибкий способ строить варианты из переиспользуемых частей, как из кубиков.

Утилитарные классы и группировка

Иногда полезны совсем маленькие классы на одно-два свойства — их называют утилитарными. Например, класс для центрирования текста или для отступа снизу:

.text-center {
  text-align: center;
}

.mb-2 {
  margin-bottom: 1rem;
}

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

/* --- Кнопки --- */
.button { ... }

/* --- Карточки --- */
.card { ... }

/* --- Форма --- */
.contact { ... }

Группировка по компонентам и понятные комментарии превращают длинный файл стилей в аккуратно организованный документ, где всё на своих местах.

Применяем в проекте

Наведём порядок в стилях сайта. Вынесем общие свойства кнопок в базовый класс button с модификаторами, а стили сгруппируем по компонентам с комментариями.

/* --- Кнопки --- */
.button {
  padding: 0.7rem 1.5rem;
  border: none;
  border-radius: 8px;
  color: white;
  transition: background-color 0.2s;
}

.button--primary {
  background-color: #1a3c8c;
}

.button--primary:hover {
  background-color: #163175;
}

/* --- Утилиты --- */
.text-center {
  text-align: center;
}

<button class="button button--primary">Оставить заявку</button>

Обновите страницу: кнопки выглядят как раньше, но теперь их стили не дублируются, а собраны из переиспользуемых частей. Общие свойства заданы один раз, различия — в модификаторах, а файл стилей разбит на понятные секции. Любое изменение вносится в одном месте и применяется везде. Код стал чистым и готовым к росту.

Частые ошибки

• Копирование блоков свойств.
  Если видите повтор — вынесите общее в отдельный класс вместо дублирования.
• Слишком много утилит.
  Утилитарные классы хороши в меру; для целого компонента лучше осмысленный класс.
• Один класс на всё.
  Не пытайтесь уместить все стили в один класс; разделяйте общее и вариативное.
• Хаос в файле.
  Без группировки и комментариев большой CSS быстро становится нечитаемым.

Итоги

Замечательно — вы научились не повторяться! Теперь вы умеете находить дублирование, выносить общие стили в переиспользуемые классы, собирать элементы композицией классов и организовывать CSS по логическим группам. Это делает код короче, а правки — быстрыми и безопасными. Стили вашего сайта стали чистыми, переиспользуемыми и аккуратно структурированными.

Отличная работа! В следующем, заключительном уроке курса мы соберём всё воедино и поговорим о хорошем codestyle — правилах аккуратного и читаемого CSS.