BEM, Block Element Modifier

Abbiamo visto come SASS ci permetta di migliorare la stesura dei fogli di stile. Per rendere ancora più leggibile il nostro codice possiamo implementare lo standard BEM (Block Element Modifier).

L’idea che sta alla base della metodologia BEM è quella di definire alcune regole per la definizione delle classi degli elementi basandosi sulle proprietà degli elementi stessi. La definizione delle classi si basa su tre componenti: il blocco, l’elemento e la variante.

• il blocco;
• l’elemento;
• la variante.

Il blocco

Il blocco è il contenitore o il contesto in cui l’elemento si trova. È un entità indipendente che può essere semplice o composta da ulteriori blocchi. Possiamo ad esempio dividere una semplice pagina Web in quattro blocchi: header, content, sidebar e footer. Questi blocchi costituiranno la base delle nostre classi CSS.

L’elemento

Il secondo componente della metodologia BEM è l’elemento. L’elemento è un singolo componente inserito in un blocco. Esempi di elementi sono un logo, un input, un link.

La classe di ogni elemento viene definita da un nome semplice, chiaro e univoco preceduto dal blocco e da due underscore:

blocco__elemento

La classe identificativa del logo sarà, ad esempio:

header__logo

mentre quella dei link di navigazione sarà:

header__link

La variante

L’ultimo componente da valutare è la variante che definisce versioni differenti di un elemento.

La variante andrà specificata come terzo parametro della classe e verrà separata dall’elemento con due trattini. Possiamo ad esempio identificare i link di navigazione come:

header__link

e i link selezionati come:

header__link--selected

Con queste tre semplici componenti andremo a definire le classi di tutti i tag della nostra pagina HTML.

SASS e BEM, più facili che mai

Spesso la variante modifica solamente una proprietà di un elemento: colore, font, background. Supponiamo di aver definito una classe per i link presenti nell’header:

.header__link 
{
	font-size: 14px;
	font-weight: bold;
	text-decoration: none;
	color: #000;
}

Abbiamo ora la necessità di definire una variante di questi link con colore del testo rosso. Seguendo la metodologia BEM dovremmo creare una variante:

.header__link--red
{
	color: #FF0000;
}

Dovremmo poi arricchire il nostro elemento con entrambe le classi:

<a href="http://html.it" class="header__link header__link--red">HTML.it</a>

In alternativa possiamo sfruttare SASS ed in particolare la funzione di @extend e modificare il precedente codice in questo modo:

.header__link
{
	font-size: 14px;
	font-weight: bold;
	text-decoration: none;
	color: #000;
}
.header__link--red 
{
	@extend .header__link;
	color: #FF0000;
}

<a href="http://html.it" class="header__link--red">HTML.it</a>

Con questa soluzione, ogni modifica sulla classe header__link andrà a modificare anche le varianti.