Mi a BEM módszertan?

BEM (Blokk, Elem, Módosító) — egy CSS osztálynevezési módszertan, amely skálázható és könnyen karbantartható kód létrehozására szolgál. Célja, hogy a komponensek függetlenek, újrahasznosíthatók és könnyen módosíthatók legyenek.

Alapelvek:

Blokk: Független komponens, egyedi névvel. Tartalmazhat elemeket és más blokkokat.
```
<div class="card">...</div>
```
Elem: A blokk része, amely nem rendelkezik önálló jelentéssel a blokk kontextusán kívül. Az elem neve két alsó vonallal (__) van elválasztva a blokk nevétől.
```
<div class="card">
  <h2 class="card__title">...</h2>
  <p class="card__text">...</p>
</div>
```
Módosító: Állapotot ad hozzá vagy megváltoztatja a blokk vagy elem megjelenését/hasonlását. A módosító neve két kötőjellel (--) van elválasztva a blokk vagy elem nevétől.
```
<button class="button button--primary button--disabled">...</button>
<div class="card card--featured">...</div>
```

Előnyök:

Átláthatóság: Az osztályok könnyen érthetőek, a komponens szerkezete látható.
Újrahasznosíthatóság: A komponensek függetlenek, és különböző részein használhatók a projektnek.
Karbantarthatóság: Egy komponensben végzett változtatások minimálisan befolyásolják a többit.
Skálázhatóság: Nagy csapatok és projektek számára alkalmas.

Példa szerkezet:

.card {
  /* Blokk stílusok */
}

.card__title {
  /* Elem stílusok */
}

.card__text {
  /* Elem stílusok */
}

.card--featured {
  /* Blokk módosító stílusok */
}

.button {
  /* Blokk stílusok */
}

.button--primary {
  /* Blokk módosító stílusok */
}

.button--disabled {
  /* Blokk módosító stílusok */
}