Что такое BEM-методология и какие задачи она решает?

При росте проекта CSS становится сложным для поддержки. BEM решает эту проблему через строгие правила именования.

Определение

BEM (Block Element Modifier) — это методология, которая описывает интерфейс как набор независимых блоков с элементами и модификаторами.

Основные сущности BEM

Методология оперирует тремя понятиями:

1. Block

   • Независимый компонент интерфейса

   • Пример: button, menu

2. Element

   • Часть блока, не имеющая смысла вне его

   • Обозначается через __

   • Пример: menu__item

3. Modifier

   • Изменяет внешний вид или поведение

   • Обозначается через --

   • Пример: button--primary

Пример

<button class="button button--primary">
  <span class="button__text">Отправить</span>
</button>

Какие задачи решает BEM

• Устраняет конфликты имен

• Делает CSS предсказуемым

• Упрощает переиспользование компонентов

• Облегчает командную разработку

Вывод

BEM — это не просто нейминг, а подход к архитектуре CSS. Он особенно полезен в больших и долгоживущих проектах.