BEM metodologiyası nədir?

BEM (Blok, Element, Modifikator) — CSS-də sinif adlandırma metodologiyasıdır və miqyaslana bilən və saxlanıla bilən kod yaratmaq üçün istifadə olunur. Məqsədi, komponentləri müstəqil, yenidən istifadə edilə bilən və asanlıqla dəyişdirilə bilən etməkdir.

Əsas prinsiplər:

Blok: Unikal adı olan müstəqil komponent. Elementlər və digər blokları daxil edə bilər.
```
<div class="card">...</div>
```
Element: Blokdan kənarda müstəqil mənası olmayan blok hissəsi. Elementin adı, blok adından iki alt xətlə (__) ayrılır.
```
<div class="card">
  <h2 class="card__title">...</h2>
  <p class="card__text">...</p>
</div>
```
Modifikator: Blok və ya elementə vəziyyət əlavə edir və ya onun görünüşünü/hərəkətini dəyişir. Modifikatorun adı, blok və ya element adından iki tire (--) ilə ayrılır.
```
<button class="button button--primary button--disabled">...</button>
<div class="card card--featured">...</div>
```

Üstünlüklər:

Oxunaqlıq: Siniflər asan başa düşüləndir, komponentin strukturu görünür.
Yenidən istifadə: Komponentlər müstəqil və layihənin müxtəlif hissələrində istifadə oluna bilər.
Dəyişikliklərin idarə olunması: Bir komponentdəki dəyişikliklər digər komponentlərə minimal təsir edir.
Miqyaslana bilənlik: Böyük komandalar və layihələr üçün uyğundur.

Nümunə struktur:

.card {
  /* Blokun stilləri */
}

.card__title {
  /* Elementin stilləri */
}

.card__text {
  /* Elementin stilləri */
}

.card--featured {
  /* Blok modifikatorunun stilləri */
}

.button {
  /* Blokun stilləri */
}

.button--primary {
  /* Blok modifikatorunun stilləri */
}

.button--disabled {
  /* Blok modifikatorunun stilləri */
}