Ce este metodologia BEM?

BEM (Bloc, Element, Modificator) — o metodologie de denumire a claselor în CSS pentru crearea unui cod scalabil și ușor de întreținut. Scopul său este de a face componentele independente, reutilizabile și ușor de modificat.

Principii de bază:

Bloc: Component independent, cu un nume unic. Poate conține elemente și alte blocuri.
```
<div class="card">...</div>
```
Element: Parte a blocului care nu are semnificație autonomă în afara contextului blocului. Numele elementului este separat de numele blocului prin două underscore-uri (__).
```
<div class="card">
  <h2 class="card__title">...</h2>
  <p class="card__text">...</p>
</div>
```
Modificator: Adaugă stare sau schimbă aspectul/comportamentul blocului sau elementului. Numele modificatorului este separat de numele blocului sau elementului prin două cratime (--).
```
<button class="button button--primary button--disabled">...</button>
<div class="card card--featured">...</div>
```

Avantaje:

Lisibilitate: Clasele sunt ușor de înțeles, se vede structura componentului.
Reutilizare: Componentele sunt independente și pot fi folosite în diferite părți ale proiectului.
Ușurință în întreținere: Modificările într-un component afectează minim celelalte.
Scalabilitate: Potrivit pentru echipe mari și proiecte.

Exemplu de structură:

.card {
  /* Stiluri pentru bloc */
}

.card__title {
  /* Stiluri pentru element */
}

.card__text {
  /* Stiluri pentru element */
}

.card--featured {
  /* Stiluri pentru modificatorul blocului */
}

.button {
  /* Stiluri pentru bloc */
}

.button--primary {
  /* Stiluri pentru modificatorul blocului */
}

.button--disabled {
  /* Stiluri pentru modificatorul blocului */
}