Cos'è la metodologia BEM?

BEM (Blocco, Elemento, Modificatore) — è una metodologia di denominazione delle classi in CSS per creare codice scalabile e manutenibile. Il suo obiettivo è rendere i componenti indipendenti, riutilizzabili e facilmente modificabili.

Principi fondamentali:

Blocco: Componente indipendente, con un nome univoco. Può contenere elementi e altri blocchi.
```
<div class="card">...</div>
```
Elemento: Parte del blocco che non ha significato autonomo fuori dal contesto del blocco. Il nome dell'elemento è separato dal nome del blocco da due underscore (__).
```
<div class="card">
  <h2 class="card__title">...</h2>
  <p class="card__text">...</p>
</div>
```
Modificatore: Aggiunge uno stato o modifica l'aspetto/comportamento del blocco o dell'elemento. Il nome del modificatore è separato dal nome del blocco o dell'elemento da due trattini (--).
```
<button class="button button--primary button--disabled">...</button>
<div class="card card--featured">...</div>
```

Vantaggi:

Leggibilità: Le classi sono facili da capire, si vede la struttura del componente.
Riutilizzabilità: I componenti sono indipendenti e possono essere usati in diverse parti del progetto.
Manutenibilità: Le modifiche in un componente influenzano minimamente le altre.
Scalabilità: Adatto per grandi team e progetti.

Esempio di struttura:

.card {
  /* Stili del blocco */
}

.card__title {
  /* Stili dell'elemento */
}

.card__text {
  /* Stili dell'elemento */
}

.card--featured {
  /* Stili del modificatore del blocco */
}

.button {
  /* Stili del blocco */
}

.button--primary {
  /* Stili del modificatore del blocco */
}

.button--disabled {
  /* Stili del modificatore del blocco */
}