БЭМ

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

Блок (block)

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

Элемент (element)

• Это составная часть блока, которая не имеет смысла вне блока
• Элемент отвечает за конкретную функцию внутри блока (например, menu__item, form__input, button__text)
• Имя элемента описывает его роль внутри блока
• Элементы всегда являются частью блока и не могут быть использованы отдельно

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

• Это свойство, которое изменяет внешний вид или поведение блока или элемента
• Модификатор позволяет создавать различные варианты блока или элемента без изменения их основной структуры (например, button--primary, menu--theme-dark, input--disabled)
• Имя модификатора описывает его состояние или характеристику

Именование классов в БЭМ

Именование классов в БЭМ следует определенному шаблону:

• block
• block__element
• block--modifier
• block__element--modifier
• complex-block
• complex-block__element
• complex-block__element--complex-modifier

Кнопка по БЭМу

• Блок: button
• Элемент: button__text (текст внутри кнопки)
• Модификаторы:
  • button--primary (делает кнопку основной)
  • button--disabled (делает кнопку неактивной)
  • button--size-large (увеличивает размер кнопки)

button.html

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

button.scss

.button {
  /* Стили для блока button */

  &__text {
    /* Стили для элемента button__text */
  }

  &--primary {
    /* Стили для модификатора button--primary */
  }

  &--size-large {
    /* Стили для модификатора button--size-large */
  }
}