BEM metodologiyasi nima?

BEM (Blok, Element, Modifikator) — CSSda sinflar nomlash metodologiyasi bo‘lib, kengaytiriladigan va qo‘llab-quvvatlanadigan kod yaratish uchun ishlatiladi. Uning maqsadi — komponentlarni mustaqil, qayta ishlatiladigan va oson o‘zgartiriladigan qilish.

Asosiy tamoyillar:

Blok: Mustaqil komponent bo‘lib, unikal nomga ega. U elementlar va boshqa bloklarni o‘z ichiga olishi mumkin.
```
<div class="card">...</div>
```
Element: Blokning qismi bo‘lib, blok kontekstidan tashqarida mustaqil ma’noga ega emas. Element nomi blok nomidan ikki chiziq (__) bilan ajratiladi.
```
<div class="card">
  <h2 class="card__title">...</h2>
  <p class="card__text">...</p>
</div>
```
Modifikator: Blok yoki elementga holat qo‘shadi yoki uning tashqi ko‘rinishi/harakati o‘zgartiradi. Modifikator nomi blok yoki element nomidan ikki tire (--) bilan ajratiladi.
```
<button class="button button--primary button--disabled">...</button>
<div class="card card--featured">...</div>
```

Afzalliklar:

O‘qilishi: Sinflar oson tushunarli, komponent tuzilishi ko‘rinadi.
Qayta ishlatish: Komponentlar mustaqil bo‘lib, loyihaning turli qismlarida ishlatilishi mumkin.
Qo‘llab-quvvatlash: Bir komponentdagi o‘zgarishlar boshqalarga minimal ta’sir qiladi.
Kengaytirilish: Katta jamoalar va loyihalar uchun mos.

Struktura misoli:

.card {
  /* Blok uslublari */
}

.card__title {
  /* Element uslublari */
}

.card__text {
  /* Element uslublari */
}

.card--featured {
  /* Blok modifikatori uslublari */
}

.button {
  /* Blok uslublari */
}

.button--primary {
  /* Blok modifikatori uslublari */
}

.button--disabled {
  /* Blok modifikatori uslublari */
}