Kas yra BEM metodologija?

BEM (Blokas, Elementas, Modifikatorius) — CSS klasės pavadinimo metodas, skirtas kurti mastelį ir lengvai prižiūrimą kodą. Jo tikslas — padaryti komponentus nepriklausomus, pakartotinai naudojamus ir lengvai keičiamus.

Pagrindiniai principai:

Blokas: Nepriklausomas komponentas su unikaliu pavadinimu. Gali turėti elementų ir kitų blokų.
```
<div class="card">...</div>
```
Elementas: Blioko dalis, kuri neturi savarankiškos reikšmės už konteksto. Elemento pavadinimas atskiriamas nuo bloko pavadinimo dviem pabraukimais (__).
```
<div class="card">
  <h2 class="card__title">...</h2>
  <p class="card__text">...</p>
</div>
```
Modifikatorius: Prideda būseną arba keičia išvaizdą/elgesį. Modifikatoriaus pavadinimas atskiriamas nuo bloko ar elemento pavadinimo dviem brūkšniais (--).
```
<button class="button button--primary button--disabled">...</button>
<div class="card card--featured">...</div>
```

Privalumai:

Skaitymas: Klasės lengvai suprantamos, matosi komponento struktūra.
Pakartotinumas: Komponentai yra nepriklausomi ir gali būti naudojami skirtingose projekto dalyse.
Priežiūra: Pakeitimai viename komponente minimaliai veikia kitus.
Mastelis: Tinka didelėms komandoms ir projektams.

Struktūros pavyzdys:

.card {
  /* Bloko stiliai */
}

.card__title {
  /* Elemento stiliai */
}

.card__text {
  /* Elemento stiliai */
}

.card--featured {
  /* Bloko modifikatoriaus stiliai */
}

.button {
  /* Bloko stiliai */
}

.button--primary {
  /* Bloko modifikatoriaus stiliai */
}

.button--disabled {
  /* Bloko modifikatoriaus stiliai */
}