Mantenere il front-end modulare con BEM

Dopo aver completato di recente un piccolo progetto che utilizza la denominazione BEM, posso tranquillamente dire che mi sono convertito. L’approccio organizzativo del framework offre una grande linea guida su come gestire lo stesso contenuto in diversi contesti.
Mantenere il front-end modulare con BEM

Specifiche sulla traduzione

Di seguito la traduzione dell’articolo “Keeping the Front-End Modular with BEM” di Connie Chan.

C’è stato molto via vai ultimamente a thoughtbot su come strutturare al meglio la nomenclatura dell classi CSS. Inevitabilmente, abbiamo sempre modo di discutere su BEM con opinioni contrastanti.
Dopo aver completato di recente un piccolo progetto che utilizza la denominazione BEM, posso tranquillamente dire che mi sono convertito. L’approccio organizzativo del framework offre una grande linea guida su come gestire lo stesso contenuto in diversi contesti. Combinato con un preprocessore, BEM mantiene il vostro css modulare e object-oriented in modo facile. Se si sta lavorando su un progetto che segue il pattern MVC, BEM si adatta perfettamente. Non lasciatevi spaventare dalla sua sintassi!

Che cos’è BEM?

Per fare un breve riepilogo, BEM sta per “Blocco”, “Elemento” e “Modificatore” ed è una convenzione di denominazione di classe. Ogni blocco potrebbe essere un gruppo di oggetti o un elemento (per esempio, un search form), gli elementi sarebbero i suoi figli (input, button), e un modificatore potrebbe essere uno dei suoi stati (disabilitato, animato, visibile).

.search { // Block
  align-content: center;
  display: flex;

  &--is-disabled { // A Modifier for disabled state
    display: none;
  }
}

.search__input { // Block with an Element
  border: 1px #000 solid;
  display: inline-block;
  flex: 1;
  padding: 1.5em 1em;
}

.search__button { // Block with another Element
  background-color: #000;
  color: #FFF;
  display: inline-block;
  font-size: 1.25em;
}

Come può aiutare la modularità?

Ora che le nostre classi dipendono dai blocchi siamo in grado di creare fogli di stile basati su essi, e, con Sass innestando eventuali modificatori. Usando il nostro esempio precedente, tutti gli stili della search potrebbero essere organizzati in un singolo file search.scss Ero solito avere la cattiva abitudine di strutturare i miei stili basandomi sulla vista ed il layout. Se volevo ad esempio rendere la search della landing page più importante di quella della testata, dovevo manipolare il selettore .search{…} nel file landing.scss ed header.scss. Chiaramente questo non è mantenibile se sono presenti più istanze del modulo search. Invece possiamo usare il parent selector (&) di Sass e scrivere qualcosa di simile:

// Filename: search.scss

.search {
  align-content: center;
  display: flex;

  &--is-disabled {
    display: none;
  }
}

.search__input {
  border: 1px #000 solid;
  display: inline-block;
  flex: 1;
  padding: 1.5em 1em;

  // Landing page specific styles
  .landing & {
    padding: 2.5em 2em;
  }
}

.search__button {
  background-color: #000;
  color: #FFF;
  display: inline-block;
  font-size: 1.25em;

  // Landing page specific styles
  .landing & {
    font-size: 1.5em;
  }
}

In questo modo, se tutti i blocchi o i loro elementi necessitano di essere cambiati per alcune pagine, basta andare nel foglio di stile dedicato piuttosto che dover fare marcia indietro e ricordare in che file e tenuto il tipo di layout.

Che punti in comune ha con l’MVC?

Da un punto di vista di sviluppo front-end, ho trovato che la logica che sta dietro a MVC è simile a BEM. Questo significa che, quando si lavora ad esempio su un progetto Rails, ho potuto mantenere le stesse linee guida per la scrittura di markup e stili. Nel pattern MVC, i model dettano come l’applicazione è strutturata, e ogni model descrive un insieme di dati. In BEM, i blocchi, compongono l’interfaccia dell’applicazione. Ogni blocco può descrivere un oggetto di interfaccia (es. search form) o un insieme di dati (es. un .user con un .user__name e .user__birthday), e possono esserci diverse istanze di esso nel DOM. Con le view è possibile visualizzare i dati di un model in vari modi senza modificare l’informazione stessa. Allo stesso modo, utilizzando modifier e parental selector, è possbile modificare lo stile grafico per molte istanze di un blocco.

Cosa succede se non mi piace la sintassi?

In tutte le nostre discussioni su BEM, il fatto che nel suo sistema di denominazione vengano utilizzate underscore e trattini, ha portato diversi vantaggi. Alcuni membri del team trovano distrazione nell’adottare BEM nel loro flusso di lavoro. Tuttavia, sono fermamente convinto che non è l’suo specifico di __ e che rende BEM, effettivamente BEM. Se si preferisce utilizzare trattini singoli o altri modi per separare le vostre B,E ed M, la metodologia è flessibile per soddisfare comunque le tue preferenze. Anche se la sintassi potrebbe non essere condivisa da tutti, BEM è senza dubbio un modo efficace per organizzare il vostro front-end e vi invitiamo comunque a provare BEM e modificarlo a proprio piacimento.

Note aggiuntive

Leggi la documentazione su BEM’s official page.

Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github