День 13 | BEM — методология именования классов

Проблема: хаос в CSS

Когда проект растёт, CSS превращается в кашу:

.header { }
.header-logo { }
.headerNav { }
.header_button { }
.btn-header { }

BEM решает эту проблему.

Что такое BEM?

BEM (Block Element Modifier) — методология именования CSS-классов от Яндекса. Стандарт индустрии.

• Block (Блок) — самостоятельный компонент
• Element (Элемент) — часть блока
• Modifier (Модификатор) — вариация

Синтаксис BEM

/* Блок */
.block { }

/* Элемент блока (двойное подчёркивание) */
.block__element { }

/* Модификатор (двойное тире) */
.block--modifier { }

/* Модификатор элемента */
.block__element--modifier { }

Блок (Block)

Самостоятельный компонент: .header, .menu, .card, .button

Элемент (Element)

<article class="card">
    <img class="card__image">
    <h3 class="card__title">Заголовок</h3>
    <p class="card__text">Текст</p>
</article>

Модификатор (Modifier)

<button class="button">Обычная</button>
<button class="button button--primary">Основная</button>
<button class="button button--large">Большая</button>

.button { padding: 10px 20px; }
.button--primary { background: #F36049; color: white; }
.button--large { padding: 15px 30px; font-size: 18px; }

BEM в SCSS

.card {
    &__title { }      // .card__title
    &__text { }       // .card__text
    &--featured { }   // .card--featured
}

Полный пример

<article class="product-card">
    <img class="product-card__image">
    <h3 class="product-card__title">Товар</h3>
    <span class="product-card__price product-card__price--old">50 000 ₽</span>
    <span class="product-card__price product-card__price--current">40 000 ₽</span>
    <button class="product-card__button button button--primary">В корзину</button>
</article>

Чек-лист BEM