BEM — Block Element Modifier
In questo appuntamento del martedì sui CSS, parliamo di BEM (Block Element Modifier).
BEM — Block Element Modifier is a methodology that helps you to create reusable components and code sharing in front-end development
BEM è una metodologia. Chi crea fogli di stile, si rende conto che non sempre è semplice strutturarli, spesso diamo nomi alle classi che con il tempo continuiamo a modificare per adattarli allo stato del progetto ma spesso non riusciamo a riutilizzare nulla di quello che viene fatto su altri progetti e altre volte il tutto risulta confusionario e poco mantenibile nel tempo.
Esistono diverse strade per definire un proprio modello di scrittura dei CSS che possiamo utilizzare e riutilizzare più volte, nel mio nuovo libro vado a suggerire diverse strade per ottimizzare questa parte del lavoro.
Puoi registrarti adesso sul sito CSSsemantico.it per ricevere GRATUITAMENTE la tua copia del mio libro in formato elettronico appena sarà disponibile.
BEM definisce una convenzione di denominazione per le classi CSS in modo che possano essere più significative e riutilizzabili. Pensiamo BEM come una nomenclatura da applicare in modo gerarchico, vediamo nel dettaglio in che cosa consiste e come applicarlo.
Block
Il Block si posiziona al vertice della gerarchia, definisce l’entità principale del nostro elemento, eccone un esempio.
/* CSS */
.btn {
/* definisco l'elemento principale */
}
<!-- HTML -->
<input type="submit" class="btn" />I block possono essere nidificati l’uno dentro l’altro e si possono comporre solo con:
- lettere
- numeri
- trattini
Element
L’Element è sempre dipendente dal block e deve essere semanticamente rilevante. Deve essere leggibile e comprensibile nella forma e nel significato. Al contrario dei “block” non può esistere in maniera indipendente, è sempre correlate al “block”. Gli “element” possono essere inseriti all’interno e questi sono indicati da due caratteri di sottolineatura che seguono il nome del blocco. Ecco un esempio di come definirlo.
/* CSS */
.btn {
/* definisco l'elemento principale */
}
.btn__primary {
/* definisco le caratteristiche specifiche per questo elemento */
}
<!-- HTML -->
<input type="submit" class="btn btn__primary" />Gli element si possono comporre solo con:
- lettere
- numeri
- trattini
- trattini bassi ( underscore )
Modifier
Il Modifier serve, come suggerisce anche il nome, a modificare block e element. I “modifier” possono manipolare il blocco in modo da poter applicare temi o stili a quel particolare componente senza infliggere modifiche su un modulo completamente non correlato. Questo viene fatto aggiungendo due trattini al nome del blocco.
/* CSS */
.btn {
/* definisco l'elemento principale */
}
.btn__price {
/* definisco l'elemento nella sua specificità */
}
.btn--red {
/* definisco un modificatore dell'elemento per il colore rosso */
}
.btn--green {
/* definisco un modificatore dell'elemento per il colore verde */
}
.btn--big {
/* definisco un modificatore dell'elemento per la dimensione */
}
<!-- HTML -->
<input type="submit" class="btn btn__price btn--red" />I modifier si possono comporre solo con:
- lettere
- numeri
- trattini
- trattini bassi ( underscore )
Vantaggi nell’utilizzo
Come avete visto, grazie alla condivisione di queste semplici regole possiamo creare componenti che sono chiari e definiti nelle loro caratteristiche e chi legge il nostro codice, capisce molto semplicemente le gerarchie e l’applicazione delle classi.
Se un altro sviluppatore ha scritto un markup HTML e non conoscevamo i CSS, dovremmo comunque avere una buona idea di quali classi sono responsabili di cosa e come dipendono l’una dall’altra. Gli sviluppatori possono quindi creare i propri componenti e modificare il blocco esistente in base al loro contenuto. Senza scrivere molto CSS, gli sviluppatori sono potenzialmente in grado di creare molte diverse combinazioni di pulsanti semplicemente cambiando una classe nel markup.
Importante
La cosa da tenete a mente nell’applicazione di BEM è seguire le regole, se questo non avviene, allora diventa complesso capire come applicarle. Dobbiamo essere attenti se facciamo estensioni, dobbiamo seguire sempre la gerarchia di Block > Element > Modifier o del più semplice Block > Modifier.
Nessuno ci vieta di mettere un selettore di modifier in un element che non appartiene allo stesso block o allo stesso element.
.nav .nav__listItem .btn--orange {
background-color: green;
}Questo è un errore perché abbiamo un modifier che è annidato in un element che non appartiene allo stesso block.
Con un po di attenzione, è certamente un modo interessante per scrivere CSS. Se vuoi scoprire altri interessanti suggerimenti per scrivere al meglio i tuoi CSS, puoi registrarti adesso sul sito CSSsemantico.it per ricevere GRATUITAMENTE la tua copia del mio libro in formato elettronico appena sarà disponibile.
Se vuoi conoscermi e scambiare idee, la mia mappa è sempre pronta per essere estesa anche alle idee degli altri.
- La lampada magica di OpenAI - Gennaio 19, 2023
- BOB, il primo programmatore - Gennaio 17, 2023
- Software e Accessibilità - Febbraio 18, 2022
