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

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 {
  /* Стилове на модификатора на блока */
}