Что такое методология BEM?

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

Основные принципы:

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

  <div class="card">...</div>
  

• Элемент: Часть блока, которая не имеет самостоятельного значения вне контекста блока. Имя элемента отделяется от имени блока двумя подчеркиваниями (__).

  <div class="card">
    <h2 class="card__title">...</h2>
    <p class="card__text">...</p>
  </div>
  

• Модификатор: Добавляет блоку или элементу состояние или изменяет его внешний вид/поведение. Имя модификатора отделяется от имени блока или элемента двумя дефисами (--).

  <button class="button button--primary button--disabled">...</button>
  <div class="card card--featured">...</div>
  

Преимущества:

• Читаемость: Классы легко понять, видно структуру компонента.
• Переиспользование: Компоненты независимы и могут использоваться в разных частях проекта.
• Поддерживаемость: Изменения в одном компоненте минимально влияют на другие.
• Масштабируемость: Хорошо подходит для больших команд и проектов.

Пример структуры:

.card {
  /* Стили блока */
}

.card__title {
  /* Стили элемента */
}

.card__text {
  /* Стили элемента */
}

.card--featured {
  /* Стили модификатора блока */
}

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

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

.button--disabled {
  /* Стили модификатора блока */
}