Будет ли BEM название двух блоков одним именем?

BEM: два блока с одним именем

BEM (Block Element Modifier) — это методология именования CSS классов, которая решает проблемы масштабируемости стилей. Вопрос о двух блоках с одним именем часто возникает при работе над проектом.

Что такое BEM?

BEM разделяет все на три части:

/* Block — независимый компонент */
.button { }

/* Element — часть блока, не может существовать отдельно */
.button__text { }
.button__icon { }

/* Modifier — вариация блока или элемента */
.button--primary { }
.button__text--bold { }

Ответ на вопрос: два блока с одним именем

Нет, не будет. В BEM каждый блок должен иметь уникальное имя. Если у тебя есть два разных компонента, которые визуально похожи, они должны быть разными блоками:

<!-- ❌ Неправильно — два блока с одним именем -->
<button class="button">Click me</button>
<a href="/" class="button">Go home</a>

<!-- ✅ Правильно — разные блоки -->
<button class="button">Click me</button>
<a href="/" class="link-button">Go home</a>

<!-- Или, если их объединяет семантика -->
<button class="button button--primary">Click me</button>
<a href="/" class="button button--link">Go home</a>

Когда один класс может использоваться дважды?

1. Modifier на одном блоке

<!-- Один блок с разными модификаторами -->
<button class="button button--primary">Save</button>
<button class="button button--secondary">Cancel</button>
<button class="button button--danger">Delete</button>

2. Один блок в разных местах страницы

<!-- Один блок может использоваться несколько раз -->
<header>
  <button class="button">Login</button>
</header>

<main>
  <form>
    <button class="button">Submit</button>
  </form>
</main>

3. Вложенные блоки (BEM позволяет это)

<!-- Блок может содержать другие блоки -->
<div class="card">
  <h2 class="card__title">Title</h2>
  <div class="button-group">
    <button class="button">OK</button>
    <button class="button">Cancel</button>
  </div>
</div>

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

❌ Ошибка 1: одно имя для разных компонентов

.item { } /* используется везде */

<!-- item может быть и кнопкой, и ссылкой, и картинкой -->
<button class="item">Action</button>
<a class="item">Link</a>
<div class="item"><img /></div>

Это плохо, потому что:

• Неясно, что такое .item
• Сложно переиспользовать
• Сложно менять стили
• Конфликты в CSS

✅ Правильно: разные блоки

<button class="button">Action</button>
<a class="link">Link</a>
<div class="image-item"><img /></div>

❌ Ошибка 2: глубокая вложенность элементов

<!-- Слишком глубоко -->
<div class="card">
  <div class="card__header">
    <div class="card__header__title">Title</div>
  </div>
</div>

✅ Правильно: плоская структура

<!-- BEM не требует отражать DOM-иерархию -->
<div class="card">
  <div class="card__header">
    <div class="card__title">Title</div>
  </div>
</div>

Даже если .card__title находится на уровне .card__header, имя остаётся .card__title, а не .card__header__title.

❌ Ошибка 3: использование BEM без смысла

/* Слишком много классов для простого стиля */
.nav__list__item__link--active { }

✅ Правильно: лаконично

.nav-item { }
.nav-item--active { }

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

Сценарий: у тебя есть карточка товара и карточка профиля. Они визуально похожи, но это разные компоненты.

<!-- ❌ Неправильно: одно имя для двух разных блоков -->
<div class="card">
  <img class="card__image" src="product.jpg" />
  <h3 class="card__title">Product Name</h3>
  <p class="card__price">$29.99</p>
</div>

<div class="card">
  <img class="card__avatar" src="profile.jpg" />
  <h3 class="card__name">User Name</h3>
  <p class="card__role">Developer</p>
</div>

<!-- ✅ Правильно: разные блоки -->
<div class="product-card">
  <img class="product-card__image" src="product.jpg" />
  <h3 class="product-card__title">Product Name</h3>
  <p class="product-card__price">$29.99</p>
</div>

<div class="profile-card">
  <img class="profile-card__avatar" src="profile.jpg" />
  <h3 class="profile-card__name">User Name</h3>
  <p class="profile-card__role">Developer</p>
</div>

Когда использовать один класс дважды

Правильное использование дублирования:

<!-- Один и тот же блок в разных местах (OK) -->
<header>
  <button class="button button--outline">Menu</button>
</header>

<footer>
  <button class="button button--outline">Subscribe</button>
</footer>

<!-- Один блок с разными модификаторами (OK) -->
<div class="alert alert--success">Success!</div>
<div class="alert alert--error">Error!</div>
<div class="alert alert--warning">Warning!</div>

Best Practices

1. Имена блоков должны быть смыслосодержательными

/* ❌ Плохо */
.item { }
.el { }
.section { }

/* ✅ Хорошо */
.button { }
.search-form { }
.user-card { }

2. Используй модификаторы для вариаций

.button { }
.button--primary { }
.button--secondary { }
.button--disabled { }

/* Не создавай отдельные блоки для вариаций */

3. Не создавай блоки для всего

/* ❌ Слишком много блоков */
.container { }
.wrapper { }
.inner { }
.content { }

/* ✅ Блок только для смыслосодержательных компонентов */
.card { }
.modal { }
.navigation { }

На собеседовании

Краткий ответ: В BEM два блока не должны иметь одно имя. Каждый блок — это независимый компонент с уникальным именем. Если компоненты визуально похожи, но семантически разные, они должны быть разными блоками. Модификаторы используются для вариаций одного блока.

Развёрнутый ответ: BEM требует, чтобы каждый блок имел уникальное имя, потому что блок — это самостоятельный, переиспользуемый компонент. Если у тебя есть две разные вещи, даже если они похожи, они должны быть разными блоками. Можно использовать один блок много раз на странице и применять к нему разные модификаторы, но имя блока должно быть уникально. BEM также не требует отражать в имени полную DOM-иерархию, достаточно одного уровня: блок-элемент-модификатор.