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 {
  /* Блоктун модификаторунун стили */
}