È una metodologia per dare nomi coerenti alle classi CSS.
BEM:
Blocco
Elemento
Modificatore
Blocco
Un blocco è un componente indipendente della pagina. Lo possiamo usare da solo dove vogliamo. Sceglieremo il nome del blocco non in base a com'è fatto, ma a cos'è: I blocchi possono essere annidati uno nell'altro:
Elemento
È la parte di un blocco e non può essere usata separatamente da esso. Come nome completo per gli elementi useremo questo formato:
nome-blocco__nome-elemento
Gli elementi possono essere annidati all'interno di altri elementi, ma nella denominazione si fa comunque riferimento al blocco, e non all'elemento genitore... leggiamo con attenzione questo esempio:
Il vantaggio di legare gli elementi al blocco indipendentemente dal livello del loro annidamento è che se un giorno volessimo cambiare la struttura interna del blocco non dovremmo ridenominare tutte le classi.
Modificatore
Definisce l'aspetto (small, large, dark...), lo stato (abilitato, disabilitato, hover...) o il comportamento di un blocco o di un elemento. Il modificatore è separato con una singola underscore dal resto del nome della classe.
