Вопрос с собеседования · Frontend

Что такое БЭМ и зачем методологии именования CSS?

JuniorВёрстка и CSS
Ещё спрашивают так:
  • Как называть CSS-классы?
Коротко

В CSS все классы глобальны, и в большом проекте стили начинают конфликтовать. БЭМ (блок, элемент, модификатор) даёт соглашение: .card — блок, .card__title — элемент блока, .card--featured — модификатор. Классы плоские, специфичность низкая и одинаковая, по имени видно, к чему относится стиль, блок можно переносить. Альтернативы, которые решают ту же проблему инструментами: CSS Modules, CSS-in-JS, утилитарный Tailwind.

  • Не вкладывать селекторы глубоко: .menu ul li a — хрупко
  • Стили блока не зависят от места на странице
  • Методология важна, пока стили глобальные

Подробно

<div class="card card--featured">
  <h3 class="card__title">…</h3>
  <button class="card__button card__button--primary">…</button>
</div>

Что хотят услышать

  • Проблема глобальных классов.
  • Блок, элемент, модификатор.
  • Низкая и одинаковая специфичность.

Проверьте себя

Один верный вариант. Подумайте, потом откройте ответ.

Показать варианты и ответ
  • ✗БЭМ рекомендует глубоко вкладывать селекторы, чтобы стили не протекали наружу
  • ✗БЭМ — JavaScript-фреймворк для компонентов с изолированными стилями
  • ✓Соглашение блок__элемент--модификатор: плоские классы с низкой специфичностью
  • ✗БЭМ нужен, только если в проекте используется Tailwind, иначе классы конфликтуют

Связанные вопросы

Партнёр платформы

Разбор собеседования с sotto

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

Разбор собеседования