Czym jest metodologia BEM?

BEM (Blok, Element, Modyfikator) — to metodyka nazewnictwa klas w CSS, służąca do tworzenia skalowalnego i łatwego w utrzymaniu kodu. Jej celem jest uczynienie komponentów niezależnymi, wielokrotnego użytku i łatwymi do modyfikacji.

Podstawowe zasady:

Blok: Niezależny komponent, mający unikalną nazwę. Może zawierać elementy i inne bloki.
```
<div class="card">...</div>
```
Element: Część bloku, która nie ma samodzielnego znaczenia poza kontekstem bloku. Nazwa elementu oddzielona od nazwy bloku dwoma podkreśleniami (__).
```
<div class="card">
  <h2 class="card__title">...</h2>
  <p class="card__text">...</p>
</div>
```
Modyfikator: Dodaje stan lub zmienia wygląd/zachowanie bloku lub elementu. Nazwa modyfikatora oddzielona od nazwy bloku lub elementu dwoma myślnikami (--).
```
<button class="button button--primary button--disabled">...</button>
<div class="card card--featured">...</div>
```

Zalety:

Czytelność: Klasy są łatwe do zrozumienia, widoczna jest struktura komponentu.
Ponowne użycie: Komponenty są niezależne i mogą być używane w różnych częściach projektu.
Łatwość utrzymania: Zmiany w jednym komponencie minimalnie wpływają na inne.
Skalowalność: Dobrze sprawdza się w dużych zespołach i projektach.

Przykład struktury:

.card {
  /* Style bloku */
}

.card__title {
  /* Style elementu */
}

.card__text {
  /* Style elementu */
}

.card--featured {
  /* Style modyfikatora bloku */
}

.button {
  /* Style bloku */
}

.button--primary {
  /* Style modyfikatora bloku */
}

.button--disabled {
  /* Style modyfikatora bloku */
}