Kas ir BEM metodoloģija?

BEM (Bloks, Elements, Modifiers) — metodoloģija klases nosaukšanai CSS, lai izveidotu mērogojamu un uzturamu kodu. Tā mērķis ir padarīt komponentus neatkarīgus, pārlietojamus un viegli maināmus.

Galvenie principi:

Bloks: Neatkarīgs komponent, kam ir unikāls nosaukums. Var saturēt elementus un citus blokus.
```
<div class="card">...</div>
```
Elements: Bloka daļa, kurai ārpus bloka konteksta nav neatkarīgas nozīmes. Elementa nosaukums atdalīts no bloka nosaukuma ar diviem apakšsvītrām (__).
```
<div class="card">
  <h2 class="card__title">...</h2>
  <p class="card__text">...</p>
</div>
```
Modifikators: Pievieno blokam vai elementam stāvokli vai maina tā izskatu/uzvedību. Modifikatora nosaukums atdalīts no bloka vai elementa nosaukuma ar diviem defisiem (--).
```
<button class="button button--primary button--disabled">...</button>
<div class="card card--featured">...</div>
```

Priekšrocības:

Lasāmība: Klases ir viegli saprotamas, redzama komponenta struktūra.
Pārlietojamība: Komponenti ir neatkarīgi un var tikt izmantoti dažādās projekta daļās.
Uzturējamība: Izmaiņas vienā komponentā minimāli ietekmē citas.
Mērogojamība: Labi piemērots lielām komandām un projektiem.

Struktūras piemērs:

.card {
  /* Bloka stili */
}

.card__title {
  /* Elementa stili */
}

.card__text {
  /* Elementa stili */
}

.card--featured {
  /* Bloka modifikatora stili */
}

.button {
  /* Bloka stili */
}

.button--primary {
  /* Bloka modifikatora stili */
}

.button--disabled {
  /* Bloka modifikatora stili */
}