QuickFrontend
CSS

Что такое BEM?

BEM - Block Element Modifier

BEM - методология именования CSS-классов для предсказуемого и масштабируемого кода.

Синтаксис

.block {}                    /* Блок - самостоятельный компонент */
.block__element {}           /* Элемент - часть блока */
.block--modifier {}          /* Модификатор - вариант блока */
.block__element--modifier {} /* Модификатор элемента */

Пример: карточка

<div class="card card--featured">
  <img class="card__image" src="...">
  <div class="card__body">
    <h2 class="card__title">Название</h2>
    <button class="card__button card__button--primary">Купить</button>
  </div>
</div>

.card          { border: 1px solid #ddd; border-radius: 8px }
.card--featured { border-color: gold }
.card__image   { width: 100%; object-fit: cover }
.card__button  { padding: 8px 16px }
.card__button--primary { background: blue; color: white }

Преимущества

  • Низкая специфичность - только классы.
  • Самодокументирующийся - по имени класса ясна структура.
  • Изолированность - стили блока не влияют на другие.

Источники