Il documento presenta la filosofia di naming BEM (Block Element Modifier) per la scrittura di CSS, mettendo in evidenza i vantaggi dell'uso di questa metodologia per creare componenti riutilizzabili e gestire siti complessi. BEM aiuta ad evitare problemi di copia/incolla e semplifica il refactoring del codice, stabilendo regole per la nomenclatura che separano blocchi, elementi e modificatori. La struttura di nomi proposta facilita la comprensione e l'organizzazione del codice CSS, rendendolo più gestibile e meno soggetto a conflitti.

1. BEM
A naming philosophy that just works

2. Ciao, sono
Alessandro Muraro
Front End Developer @ Objectway
Organizer @ Milano Front End Meetup
Su Twitter sono @akmur
Il mio sito é alexmuraro.me

4. Per fortuna c’è BEM
BEM é un insieme di regole
per dare nomi alle cose.

5. Background
● Metodologia per dare nomi sensati agli elementi in CSS
senza diventare matti.
● Inventato da Yandex.
● Creato per gestire siti complessi da supportare a lungo.
● Aiuta nella creazione di componenti riutilizzabili ed
estendibili.

6. Che problemi risolve
● Evitare il copia/incolla di CSS.
● Ridurre al minimo i problemi causati dallo scope
globale del CSS.
● Semplificare il refactoring.
● Rendere il codice riutilizzabile.
● Rendere lo sviluppo più rapido.

7. Si ma chevvordì?
Block
Element
Modifier

8. BlockElement
ModifierBlock
ElementModif

9. ● Componente stand-alone.
● Indipendente dal punto di vista funzionale.
● Possono essere nidificati ma senza avere rapporto gerarchico.
Block: Concetti Base

10. Block: Esempio Visuale

11. Block: Esempio Codice
Nota 1: Non è necessario mettere il nome del blocco in maiuscolo, tuttavia
può essere una buona idea per rendere il codice più leggibile.
Nota 2: Non si deve replicare la struttura dell’HTML nel CSS.

12. ● Il nome descrive la funzione e non l’estetica.
● Il nome del blocco definisce il namespace per evitare conflitti nel CSS.
● Il blocco non deve dipendere da altri componenti.
● Il blocco non deve influenzare il posizionamento degli altri blocchi tramite
positioning o margini esterni (robe da layout).
● Non si usano mai ID o nomi di tag, solo classi.
Block: Altri Concetti

13. BlockElement
ModifierBlock
ElementModif

14. ● Un elemento è parte di un blocco e non può essere utilizzato separatamente
da esso.
● Se un elemento può essere usato da solo… è un blocco!
● Un elemento può essere all’interno di un altro elemento appartenente allo
stesso blocco, ma NON all’interno di un altro blocco.
Element: Concetto base

15. Elemento:
Esempio Visuale

16. Elemento: Esempio codice 1

17. ● Il nome di un elemento non deve seguire la struttura dell’HTML
● Si separa il nome dell’elemento da quello del blocco tramite due
underscores “_ _”
● Il nome di un elemento deve contenere il nome del blocco.
Element: Altri Concetti

18. Elemento: Esempio codice 2

19. Elemento: Esempio codice 3

20. ● Un componente può essere descritto da un mix di blocchi ed elementi.
Element: Altri Concetti

21. ● Un blocco può non avere elementi.
● Un blocco può esistere dentro un elemento
Block & Element: Altri Concetti

22. BlockElement
ModifierBlock
ElementModif

23. ● Classe addizionale che modifica le “impostazioni” di base di un blocco o
elemento.
● Viene separato dal blocco o dall’elemento da due dash “--”
● Quando sia applica un modificatore, viene riutilizzata anche la classe
originale, mentre il modificatore contiene solo la modifica
● Si possono usare modificatori multipli
Modifier: Concetti Base

24. Modificatore: Esempio di codice 1

25. Modificatore: Esempio di codice 2

26. ● en.bem.info/methodology/quick-start/
● getbem.com/
● www.youtube.com/watch?v=IO-4Z32O--c (7 minutes video)
Links

27. ● Pattern 7-in-1 (parte di Sass Guidelines): sass-guidelin.es/it
● ITCSS: youtube.com/watch?v=1OKZOV-iLj4
Bonus