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