БЭМ: Секреты эффективной разработки интерфейсов

Методология БЭМ (Блок, Элемент, Модификатор) основана на принципе разделения интерфейсных компонентов на независимые блоки. Это позволяет разработчикам легко и быстро создавать сложные интерфейсы и многократно использовать уже написанный код без необходимости его копирования.

Содержание

Почему стоит выбрать БЭМ?
Основы БЭМ
Примеры использования
Как быть с именами из нескольких слов?
Заключение

Почему стоит выбрать БЭМ?

Методология БЭМ имеет ряд ключевых преимуществ:

Простота использования: БЭМ легко усваивается и применяется на практике.
Масштабируемость: Структуры, с

Основы БЭМ

Имена классов в БЭМ состоят из трёх основных частей: блок, элемент и модификатор:

[block]__[element]--[modifier]

Блок: Основная родительская сущность, определяющая функциональность компонента. Название блока должно отражать его смысл и предназначение.
Элемент: Внутренние части блока, выполняющие вспомогательные функции. Элементы существуют только в контексте своего блока и не используются отдельно.
Модификатор: Определяет различные состояния или вариации блока или элемента, влияя на внешний вид или поведение.

Примеры использования

Простой блок

Самый базовый компонент включает в себя только один класс, который и будет являться блоком:

<style>
.btn {}
</style>

<button class="btn"></button>

Компонент с модификатором

Модификатор добавляет вариативность блоку:

<style>
.btn {
display: inline-block;
color: blue;
}
.btn--secondary {
color: green;
}
</style>

<button class="btn btn--secondary"></button>

Важно помнить, что модификатор не может существовать без блока:

<!-- Неправильно -->
<style>
.btn--secondary {
display: inline-block;
color: green;
}
</style>
<button class="btn--secondary"></button>

Компоненты с элементами

Более сложные компоненты включают элементы, имена которых начинаются с названия блока:

<!-- Правильно -->
<style>
.card {}
.card__title {}
.card__description {}
</style>

<div class="card">
<h1 class="card__title"></h1>
<p class="card__description"></p>
</div>

Ошибкой будет использование многоуровневых имен классов:

<!-- Неправильно -->
<style>
.card__description__excerpt {}
</style>

<div class="card">
<div class="card__description">
<p class="card__description__excerpt"></p>
</div>
</div>

Вместо этого используйте плоскую структуру:

<!-- Правильно -->
<style>
.card__description {}
.card__excerpt {}
</style>

<div class="card">
<div class="card__description">
<p class="card__excerpt"></p>
</div>
</div>

Модификация элементов

Когда необходимо изменить элемент, лучше всего добавить модификатор к конкретному элементу:

<style>
.card__title {}
.card__title--big {}
</style>

<div class="card">
<h1 class="card__title card__title--big"></h1>
</div>

Как быть с именами из нескольких слов?

Методология БЭМ предполагает использование двойного подчеркивания и двойного дефиса для разделения структурных элементов компонента:

[block]__[element]--[modifier]

Это делает имена классов легко читаемыми и понятными. Следует избегать использования аббревиатур, за исключением общепринятых сокращений.

Заключение

Методология БЭМ позволяет создавать гибкие и масштабируемые интерфейсы. Соблюдение правил именования и структуры классов в БЭМ делает код более поддерживаемым и понятным, что существенно упрощает процесс разработки.