Mis on BEM-metodoloogia?

BEM (Blokk, Element, Modifikaator) — meetod klasside nimetamise CSS-is, et luua skaleeritavat ja hooldatavat koodi. Selle eesmärk on muuta komponendid sõltumatuks, taaskasutatavaks ja kergesti muudetavaks.

Põhiprintsiibid:

Blokk: Sõltumatu komponent, millel on unikaalne nimi. Võib sisaldada elemente ja teisi blokke.
```
<div class="card">...</div>
```
Element: Bloki osa, millel väljaspool bloki konteksti ei ole iseseisvat tähendust. Elementi nimi eraldatakse bloki nimest kahe alakriipsuga (__).
```
<div class="card">
  <h2 class="card__title">...</h2>
  <p class="card__text">...</p>
</div>
```
Modifikaator: Lisab blokile või elemendile oleku või muudab selle välimust/käitumist. Modifikaatori nimi eraldatakse bloki või elemendi nimest kahe sidekriipsuga (--).
```
<button class="button button--primary button--disabled">...</button>
<div class="card card--featured">...</div>
```

Eelised:

Lugemine: Klassid on lihtsad mõista, nähtav on komponendi struktuur.
Taaskasutus: Komponendid on sõltumatud ja neid saab kasutada erinevates projektiosades.
Hooldatavus: Muudatused ühes komponendis mõjutavad teisi minimaalselt.
Skaleeritavus: Sobib hästi suurtele meeskondadele ja projektidele.

Struktuuri näide:

.card {
  /* Bloki stiilid */
}

.card__title {
  /* Elemendi stiilid */
}

.card__text {
  /* Elemendi stiilid */
}

.card--featured {
  /* Bloki modifikaatori stiilid */
}

.button {
  /* Bloki stiilid */
}

.button--primary {
  /* Bloki modifikaatori stiilid */
}

.button--disabled {
  /* Bloki modifikaatori stiilid */
}