Metodologia BEM: scrivere CSS in maniera scalabile e mantenibile

Ti è mai capitato di assegnare alle classi CSS dei nomi casuali che non rispettano una determinata gerarchia e non descrivono quello che devono fare?

Tranquillo, la risposta è scontata… Soprattutto quando si è alle prime armi è abbastanza complicato scrivere codice mantenibile e scalabile, in quanto queste abilità (skills) si sviluppano con tanta pratica e attenzione non soltanto nello scrivere codice funzionante, ma anche ben strutturato e comprensibile.

Per risolvere questo piccolo intoppo, possiamo utilizzare la convenzione BEM.

Quest’ultima ti permetterà di scrivere classi CSS comprensibili sia per te, che per tutti gli sviluppatori che dovranno leggere il tuo codice.

La più grande peculiarità di BEM è quella di poter scrivere codice modulare, riutilizzabile in molteplici punti del codice e in più progetti.

Ti mostreremo nel dettaglio come utilizzare la convenzione BEM.

Per nominare le classi CSS utilizziamo la seguente sintassi: 

Con block indichiamo un modulo della nostra pagina, come ad esempio: l’intestazione (header).

Element invece rappresenta l’elemento all’interno del nostro blocco (modulo), come ad esempio il logo.

Modifier è quella specifica classe che modifica il blocco o l’elemento.

Analizzando il seguente codice HTML puoi intuire in maniera istantanea che abbiamo un blocco header con all’interno un logo ed un blocco nav. Quest’ ultimo è caratterizzato da una lista che a sua volta contiene degli items (li).

In questa maniera diventa facilissimo comprendere lo scopo di una determinata classe e soprattutto la correlazione gerarchica tra le varie classi e i vari elementi.

Dopo aver approfondito i concetti di blocco (block) ed elemento (element), ci soffermiamo su quello di modificatore (modifier). Il modifier è una classe che si applica ad un elemento, con lo scopo di modificare una o più proprietà dello stesso.

In questo specifico caso immaginiamo di voler aggiungere dello stile nel momento in cui uno specifico link sia stato già visualizzato. Per fare questo utilizziamo appunto il modifier rispettando la sintassi sopra riportata (--modifier).

Sviluppiamo le classi CSS: 

Visualizziamo il risultato sul browser:

Utilizzare la convenzione BEM in modo corretto ti agevolerà in maniera considerevole nella scrittura del codice e soprattutto ti farà risparmiare molto tempo successivamente quando dovrai revisionarlo o completarlo.