В любой профессии, в любом деле, есть «головные боли». Стандартные проблемы, с которыми тяжело или скучно. У всех кто работает с кодом такой «головной болью» является отсутствие структурированной и понятной другому программисту логики написания кода.

Любой язык разметки или язык программирования, или любой другой язык (например английский или немецкий, нотная грамота) имеет некоторые стандарты. Но возможностей изъясняться непонятно все равно много.

Язык каскадных стилей, который используется в html-верстке имеет правила структурирования, без которых код не будет работать. Но свобода в написании кода все равно сохраняется.

Чтобы программист и его коллеги лучше понимали код был написан Стандарт БЭМ. Его использую в работе я, а также мои сотрудники.
Этот пост — руководство для работы над всеми проектами в области h

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

Основные принципы именования по БЭМ

1. Блок — независимый компонент интерфейса, например, кнопка, меню, форма.
   • Имя блока записывается строчными буквами, слова разделяются дефисом.
   • Например: menu, header, button.
2. Элемент — часть блока, которая не может существовать вне него, например, пункт меню, иконка в кнопке.
   • Имя элемента записывается через двойное подчеркивание после имени блока.
   • Формат: block__element.
   • Например: menu__item, button__icon.
3. Модификатор — свойство, которое изменяет внешний вид или поведение блока или элемента, например, цвет, размер.
   • Имя модификатора записывается через одинарное подчеркивание после блока или элемента.
   • Формат: block--modifier или block__element--modifier.
   • Например: button--primary, menu__item--active.

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

Простой блок — меню:

<div class="menu">
    <div class="menu__item">Главная</div>
    <div class="menu__item">О нас</div>
    <div class="menu__item">Контакты</div>
</div>

Блок с модификатором — активный пункт меню:

<div class="menu">
    <div class="menu__item menu__item--active">Главная</div>
    <div class="menu__item">О нас</div>
    <div class="menu__item">Контакты</div>
</div>

Блок с элементом и модификатором блока — большая кнопка:

<button class="button button--large">
    <span class="button__icon">🎉</span>
    <span class="button__text">Нажми меня</span>
</button>

Составной блок с элементами и модификаторами — карточка товара с разными состояниями:

<div class="product-card product-card--featured">
    <h3 class="product-card__title">Название товара</h3>
    <div class="product-card__price">500 руб.</div>
    <button class="product-card__button product-card__button--buy">Купить</button>
    <button class="product-card__button product-card__button--wishlist">В избранное</button>
</div>

Советы по использованию БЭМ

• Старайтесь не использовать более одного уровня вложенности элементов. Например, вместо block__element__subelement используйте отдельный блок, если потребуется.
• Для модификаторов используйте описательные имена (--active, --large, --primary), которые однозначно указывают на назначение модификатора.
• Избегайте избыточного количества модификаторов и вложенности — это может усложнить код и сделать его трудным для поддержки.

Источник: https://ru.bem.info/methodology/