Co je metodologie BEM?

BEM (Blok, Element, Modifikátor) — metodika pojmenovávání tříd v CSS pro vytváření škálovatelného a udržovatelného kódu. Jejím cílem je udělat komponenty nezávislé, znovu použitelné a snadno měnitelné.

Základní principy:

Blok: Nezávislá komponenta s unikátním názvem. Může obsahovat elementy a další bloky.
```
<div class="card">...</div>
```
Element: Část bloku, která nemá samostatný význam mimo kontext bloku. Název elementu je oddělen od názvu bloku dvěma podtržítky (__).
```
<div class="card">
  <h2 class="card__title">...</h2>
  <p class="card__text">...</p>
</div>
```
Modifikátor: Přidává stavy nebo mění vzhled/chování bloku nebo elementu. Název modifikátoru je oddělen od názvu bloku nebo elementu dvěma pomlčkami (--).
```
<button class="button button--primary button--disabled">...</button>
<div class="card card--featured">...</div>
```

Výhody:

Čitelnost: Třídy jsou snadno pochopitelné, vidíte strukturu komponenty.
Znovupoužitelnost: Komponenty jsou nezávislé a mohou být použity v různých částech projektu.
Údržba: Změny v jednom komponentu minimálně ovlivňují ostatní.
Škálovatelnost: Vhodné pro velké týmy a projekty.

Příklad struktury:

.card {
  /* Styly bloku */
}

.card__title {
  /* Styly elementu */
}

.card__text {
  /* Styly elementu */
}

.card--featured {
  /* Styly modifikátoru bloku */
}

.button {
  /* Styly bloku */
}

.button--primary {
  /* Styly modifikátoru bloku */
}

.button--disabled {
  /* Styly modifikátoru bloku */
}