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

После этого урока вы сможете именовать классы по системе BEM, делая CSS-код понятным, устойчивым к конфликтам и лёгким в поддержке.

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

Вы умеете давать элементам классы и стилизовать их. Теперь научимся делать это системно. В сквозном проекте мы приведём классы карточек услуг к единой схеме BEM.

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

• Зачем нужна система именования классов.
• Что такое блок, элемент и модификатор в BEM.
• Как записываются имена по BEM.
• Как BEM помогает избегать конфликтов стилей.
• Как применять BEM к реальному компоненту.

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

• BEM — методология именования: Блок, Элемент, Модификатор.
• Блок — самостоятельный компонент (card, menu, form).
• Элемент — часть блока, отделяется __ (card__title).
• Модификатор — вариант блока или элемента, отделяется -- (card--dark).
• Компонент — переиспользуемый самостоятельный кусок интерфейса.

Зачем система именования

Представьте, что в проекте есть класс .title. Сначала он оформлял заголовок карточки, потом кто-то применил его в шапке, и стили наложились друг на друга. Такие конфликты — типичная беда растущих проектов. Проблема в том, что имя .title слишком общее и ничего не говорит о том, где и зачем оно используется.

Система именования решает это, делая имена классов уникальными и самоописательными. Взглянув на класс, вы сразу понимаете, к какому компоненту он относится и какую роль играет. BEM — самая распространённая такая система, и её знание ожидают почти в любой команде.

Блок

Блок в BEM — это самостоятельный, законченный компонент интерфейса, который имеет смысл сам по себе: карточка, меню, форма, кнопка. Имя блока — это имя всего компонента:

<div class="card">
  ...
</div>

.card {
  padding: 1.5rem;
  border-radius: 12px;
}

Блок card — это вся карточка целиком. Имя блока обычно короткое и отражает суть компонента. От блока дальше «растут» его части и варианты. Хорошее правило: блок можно перенести в другое место страницы, и он останется осмысленным и рабочим.

Элемент

Элемент — это часть блока, которая не имеет смысла отдельно от него: заголовок карточки, её кнопка, картинка. В BEM имя элемента образуется от имени блока через двойное подчёркивание __:

<div class="card">
  <h3 class="card__title">Веб-разработка</h3>
  <p class="card__text">Создаём сайты под ключ.</p>
</div>

.card__title {
  font-size: 1.25rem;
}

.card__text {
  color: #555;
}

Имена card__title и card__text сразу говорят: это заголовок и текст, принадлежащие карточке. Такое имя уникально — оно не столкнётся с заголовком из другого блока, у которого будет своё имя вроде header__title. Двойное подчёркивание — визуальный маркер «это часть блока».

Модификатор

Модификатор описывает вариант блока или элемента — другой цвет, размер, состояние. Он образуется через двойное дефис -- и добавляется вместе с основным классом:

<div class="card card--featured">
  <h3 class="card__title">Премиум-услуга</h3>
</div>

.card--featured {
  border: 2px solid #1a3c8c;
}

Здесь card--featured — вариант карточки с рамкой, выделяющий особую услугу. Обратите внимание: элемент несёт оба класса — базовый card (общие стили) и модификатор card--featured (отличия). Так вы не дублируете общие правила, а лишь добавляете различия. Модификаторы удобны для разных состояний и вариаций одного компонента.

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

Приведём карточки услуг к схеме BEM. Карточка — это блок card, её заголовок и текст — элементы, а особую карточку выделим модификатором.

<section class="services">
  <article class="card">
    <h3 class="card__title">Веб-разработка</h3>
    <p class="card__text">Создаём сайты под ключ.</p>
  </article>

  <article class="card card--featured">
    <h3 class="card__title">Премиум-поддержка</h3>
    <p class="card__text">Приоритетная помощь 24/7.</p>
  </article>
</section>

.card {
  padding: 1.5rem;
  border-radius: 12px;
  background-color: #ffffff;
}

.card__title {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

.card__text {
  color: #555;
}

.card--featured {
  border: 2px solid #1a3c8c;
}

Обновите страницу: карточки выглядят как прежде, но теперь их классы образуют понятную систему. По любому классу — card, card__title, card--featured — сразу ясно, что это и к чему относится. Особая карточка выделена рамкой через модификатор, не дублируя общих стилей. Код стал предсказуемым и готовым к росту.

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

• Слишком общие имена.
  Классы вроде .title или .box быстро конфликтуют; привязывайте элемент к блоку.
• Путаница __ и --.
  Двойное подчёркивание — для элементов, двойной дефис — для модификаторов.
• Модификатор без базового класса.
  Модификатор добавляют вместе с основным классом, а не вместо него.
• Элемент элемента.
  В BEM не делают card__title__icon; имя элемента образуют от блока, а не от другого элемента.

Итоги

Отличная работа — вы освоили BEM! Теперь вы умеете именовать классы системно: выделять блоки, их элементы через __ и модификаторы через --. Такие имена самоописательны, уникальны и не конфликтуют между собой — именно поэтому BEM так любят в командах. Ваши карточки услуг получили аккуратную, профессиональную структуру классов.

Прекрасное начало последнего раздела! В следующем уроке разберёмся со специфичностью селекторов и вложенностью — поймём, почему иногда «стиль не применяется», и научимся это контролировать.