Usare la scrittura BEM per organizzare il codice

BEM è una tecnica di scrittura CSS che si basa sul principio dell’Atomic Design di Brad Frost. Le classi assegnate identificano:

• B – block: cioè i blocchi di codice indipendenti;
• E – element: cioè gli elementi che stanno nei blocchi;
• M – modifier: cioè le varianti particolari;
• + classi Utility: generali, per organizzare spaziature, tipografia…

Un codice BEM è:

• Accessibile: facile da leggere, utile anche se si lavora in team;
• Mantenibile: facile da aggiornare nel tempo, soprattutto con SASS;
• Flessibile: facile da comporre per creare strutture, ampliabile;
• Scalabile: non è necessario usare gli !important per forzare lo stile;
• Leggero: più performante perché non esiste codice inutilizzato.

Realizzo siti con WordPress, quindi capita di lavorare con codici diversi (WordPress, Plugin vari, codice custom, Bootstrap, Elementor). Molte volte questi codici usano BEM, ma in modo creativo, per cui si finisce nell’eccedere con gli !important.

• Codice custom per tema custom: nel tempo ho creato un codice custom che riutilizzo da progetto a progetto (una specie di Design System);
• Pensare per blocchi: anche se devo usare Elementor preferisco aggiungere le classi con tecnica BEM. Questo è utile per aggiungere proprietà che altrimenti non sarebbero disponibili;
• Usare classi descrittive: in modo da capire il codice anche a distanza di mesi. Il codice deve raccontare una storia;
• Dividere CSS per blocchi: divido i fogli di stile SASS in base alle funzioni associate (ad esempio: base / blocchi / blog / plugin).

Per usare BEM bisogna prima definire delle regole e poi bisogna rispettarle. Queste coinvolgono soprattutto:

• Naming: cioè bisogna trovare dei buoni nomi per le classi;
• Progettazione: cioè bisogna riuscire a organizzare bene le classi, senza eccedere nel perfezionismo (ahimè spesso succede).

Assolutamente no. Al di là della comodità, mi piace molto lavorare in questo modo perché il codice diventa un linguaggio di design.