Как правильно именовать CSS-классы в проекте?

Зачем нужны правила именования CSS-классов?

В больших проектах без единой системы имена классов быстро становятся хаотичными: .header, .headerTitle, .title-red. Это приводит к конфликтам, трудностям при рефакторинге и путанице. Методологии вроде BEM решают эту проблему, вводя строгую структуру.

Основы BEM

BEM расшифровывается как Блок-Элемент-Модификатор. Блок — независимый компонент (например, button). Элемент — часть блока, не имеющая смысла вне его (button__icon). Модификатор — вариант состояния или внешнего вида (button_disabled).

Пример:

<div class="card">
  <h2 class="card__title">Заголовок</h2>
  <p class="card__text card__text_highlighted">Текст</p>
</div>

Здесь card — блок, card__title и card__text — элементы, card__text_highlighted — модификатор элемента.

Практические рекомендации

• Используйте дефис для разделения слов в блоке: my-block.
• Два подчеркивания для элемента: my-block__element.
• Одно подчеркивание для модификатора: my-block__element_modifier.
• Избегайте вложенности элементов: block__elem1__elem2 — плохо, лучше создать новый блок.

Вывод: BEM — это стандарт де-факто для крупных проектов. Он делает CSS предсказуемым, упрощает командную работу и рефакторинг. Применяйте его, если проект растёт или в нём работает несколько разработчиков.