Čo je metodológia BEM?

BEM (Blok, Element, Modifikátor) — metodológia pomenovania tried v CSS na vytváranie škálovateľného a udržiavateľného kódu. Jej cieľom je urobiť komponenty nezávislými, znovu použiteľnými a ľahko meniteľnými.

Základné princípy:

Blok: Nezávislá súčasť s unikátnym názvom. Môže obsahovať elementy a ďalšie bloky.
```
<div class="card">...</div>
```
Element: Časť bloku, ktorá nemá samostatný význam mimo kontextu bloku. Názov elementu je oddelený od názvu bloku dvomi podtržníkmi (__).
```
<div class="card">
  <h2 class="card__title">...</h2>
  <p class="card__text">...</p>
</div>
```
Modifikátor: Pridáva stav alebo mení vzhľad/ správanie bloku alebo elementu. Názov modifikátora je oddelený od názvu bloku alebo elementu dvomi pomlčkami (--).
```
<button class="button button--primary button--disabled">...</button>
<div class="card card--featured">...</div>
```

Výhody:

Čitateľnosť: Triedy sú ľahko pochopiteľné, štruktúra komponentu je viditeľná.
Znovupoužiteľnosť: Komponenty sú nezávislé a môžu byť použité v rôznych častiach projektu.
Údržba: Zmeny v jednom komponente majú minimálny vplyv na ostatné.
Škálovateľnosť: Vhodné pre veľké tímy a projekty.

Príklad štruktúry:

.card {
  /* Štýly bloku */
}

.card__title {
  /* Štýly elementu */
}

.card__text {
  /* Štýly elementu */
}

.card--featured {
  /* Štýly modifikátora bloku */
}

.button {
  /* Štýly bloku */
}

.button--primary {
  /* Štýly modifikátora bloku */
}

.button--disabled {
  /* Štýly modifikátora bloku */
}