[sociallocker]

Cosa è BEM e perché esiste

BEM, acronimo per “Block Element Modifier” che ti aiuta a creare codice CSS che sia modulare, riutilizzabile e scalabile. Aggiungo anche: un codice che sia pulito, con una logica ben precisa e non a caso come viene scritto dalla maggior parte dei frontend developer.

Questa che ti propongo è la GUIDA per imparare a scrivere i CSS con BEM e contiene la mia personale spiegazione sull’utilizzo di questa metodologia, che è una delle tante disponibili e che si stanno diffondendo nello sviluppo dei nostri amati Cascading Style Sheet.

Consultando il sito ufficiale di BEM ( in lingua inglese ), vedrai che vengono evidenziate 3 caratteristiche:

  1. Facile
  2. Modulare
  3. Flessibile

Facile perché per utilizzare BEM, ti basta sapere come “ragiona”. Non serve nessun software aggiuntivo rispetto a quelli che già stai usando per creare il tuo codice.

La metodologia fa differenza tra block e selettori e più avanti vedremo cosa intende. Questo rende modulari le regole CSS rendendole così scalabili e riutilizzabili.

Flessibile, perché la metodologia si adatta ai nostri progetti, non il contrario.

Nel panorama dello sviluppo di software web, dove HTML e CSS svolgono ruoli fondamentali, l’ingegnerizzazione dei metodi di sviluppo riguardo quest’ultimo è stato praticamente ASSENTE. Per questo motivo, metodologie come BEM si propongono come soluzione e, soprattutto, come standard per far fronte alla “mandria impazzita” di sviluppatori che producono codice senza la minima regola o convenzione.

In poche parole, BEM è una convenzione dei “nomi” da usare quando si scrive codice CSS.

I vantaggi di usare BEM

There are only two hard problems in Computer Science: cache invalidation and naming things — Phil Karlton

Il problema del naming nel mondo CSS dovrebbe esserti ormai chiaro. Forse ti si è “accesa la lampadina” nel momento in cui hai iniziato a leggere questo articolo. Se sei come me, ti sei sempre accorto che c’era qualcosa che non andava, come da migliorare, ma magari non avevi mai identificato con precisione il problema.

Il problema è la confusione che si crea nel NON usare un metodo. Sul lungo periodo, questo significa la MORTE della manutenzione del codice. Un vero disastro.

Usando BEM, questa confusione viene meno e conseguentemente anche la frustrazione nel dover mettere mano a codice vecchio di qualche mese.

Come si scrive codice in stile BEM

Block

I block si posizionano nella zona più alta della gerarchia. Di fatto BEM ha una struttura piramidale, dove i block sono al vertice. I block sono entità che, da sole, devono rappresentare qualcosa di specifico.

Un esempio pratico per i block

Se volessimo usare correttamente i block in un progetto reale potremmo definire, ad esempio, come block un’entità che ha un significato, come “team”.

Immagina di avere il sito della tua agenzia di sviluppo web e di design e di dover creare la pagina con tutti i membri del tuo team. “Team” sarebbe la classe che dobbiamo dare all’elemento che costituisce ogni membro del team, perchè ogni membro del team, fa parte, appunto.. dell’entità team!

Guardala in modo molto pragmatico, come se dovessi “raggruppare” un insieme di persone con qualcosa in comune ( lavorano nella stessa agenzia web ).

Le regole per scrivere i block

Naming

I block si possono comporre solo con:

  • lettere
  • numeri
  • trattini

del set di caratteri Latin. Nel nostro caso “team”.

HTML

Qualsiasi elemento del DOM a cui puoi inserire l’attributo “class” può essere un block.

Ad esempio:

[html]<div class="team">…</div>[/html]

CSS

  • puoi usare solo l’attributo “class” per assegnare i nomi ai block
  • NON puoi usare gli attributi name o ID
  • un block non può dipendere da altri block, è totalmente INDIPENDENTE

Element

Gli “element” sono sempre dipendenti dai block e devono essere semanticamente rilevanti. Quindi, devono essere leggibili e comprensibili nella forma e nel significato. Al contrario dei “block” non possono esistere in maniera indipendente, ma sono sempre correlati ai “block”.

Le regole per scrivere gli element

Naming

Gli element si possono comporre solo con:

  • lettere
  • numeri
  • trattini
  • trattini bassi ( underscore )

del set di caratteri Latin. Nel nostro caso, per fare un esempio pratico, potrebbe essere “francesco”.

HTML

[html]<div class="team">

<p class="team__francesco">…</p>
</div>
[/html]

Ogni nodo del DOM all’interno di un block può essere un element. Gli element all’interno del block hanno tutti lo stessa importanza.

CSS

  • puoi usare solo l’attributo “class” per assegnare i nomi agli element
  • NON puoi usare gli attributi name o ID
  • un element non può dipendere da altri element, è totalmente INDIPENDENTE

Questo è un esempio di codice CORRETTO

[css].team__francesco { color: red; }[/css]

Questo è un esempio di codice NON CORRETTO

[css]div.team__francesco { color: red; }[/css]

Modifier

I “modifier” servono, come suggerisce anche il nome, a modificare block e element.

Le regole per scrivere i modifier

Naming

I modifier si possono comporre solo con:

  • lettere
  • numeri
  • trattini
  • trattini bassi ( underscore )

del set di caratteri Latin. Nel nostro caso, per fare un esempio pratico, potrebbe essere “francesco”.
Per creare un modifier e comporre la classe CSS bisogna scrivere il nome del block e dell’element e scrivere due trattini più il nome del modifier. Gli spazi non si possono usare e al loro posto vengono utilizzati i trattini singoli.

Ad esempio: “team–sviluppo”.

HTML

I modifier si possono applicare SOLO ai nodi del DOM che sono block o element. Per scrivere correttamente un modifier, inoltre, bisogna mantenere anche la classe originaria del block o element.

Questo è un esempio di codice CORRETTO

[html]<div class="team team–sviluppo">…</div>

<div class="team team–big">…</div>[/html]

Questo è un esempio di codice NON CORRETTO

[html]<div class="team–sviluppo">…</div>[/html]

CSS

Usa il modificatore come classe CSS, ad esempio:

[css].team–hidden { … }
.team–modifica .team__element { … }
.team__element–modifier { … }[/css]

Esempi

Supponi di avere un block form con i modifier

[css]theme: xmas[/css]

e

[css]simple: true[/css]

e con gli elements “input” e “button”

e che l’element “button” a sua volta ha un modifier

[css]disabled: true[/css]

per fare in modo che il form non venga inviato finchè non viene riempita la input.

Questo è il codice HTML

[html]
<form>
<input class="form__input" type="text" />
<input class="form__submit form__submit–disabled" type="submit" />
</form>
[/html]

Questo è il codice CSS

[css].form { }
.form–theme-xmas { }
.form–simple { }
.form__input { }
.form__submit { }
.form__submit–disabled { }[/css]

Abbiamo fatto insieme un percorso per imparare delle basi solide per utilizzare BEM. Se sei arrivato fino a qui, allora hai già trovato tutto quello che ti serve per capire il funzionamento di questa metologia, per scrivere del codice CSS che sia più leggibile e comprensibile e, soprattutto, che sia finalmente uno standard, un linguaggio comune per tutto il team che sviluppa insieme.

[/sociallocker]