Download - BEM - A naming philosophy that just works
![Page 1: BEM - A naming philosophy that just works](https://reader033.vdocuments.mx/reader033/viewer/2022052915/58ce90c71a28ab8c3b8b56b9/html5/thumbnails/1.jpg)
BEMA naming philosophy that just works
![Page 2: BEM - A naming philosophy that just works](https://reader033.vdocuments.mx/reader033/viewer/2022052915/58ce90c71a28ab8c3b8b56b9/html5/thumbnails/2.jpg)
Ciao, sonoAlessandro MuraroFront End Developer @ Objectway
Organizer @ Milano Front End Meetup
Su Twitter sono @akmur
Il mio sito é alexmuraro.me
![Page 3: BEM - A naming philosophy that just works](https://reader033.vdocuments.mx/reader033/viewer/2022052915/58ce90c71a28ab8c3b8b56b9/html5/thumbnails/3.jpg)
![Page 4: BEM - A naming philosophy that just works](https://reader033.vdocuments.mx/reader033/viewer/2022052915/58ce90c71a28ab8c3b8b56b9/html5/thumbnails/4.jpg)
Per fortuna c’è BEM
BEM é un insieme di regole
per dare nomi alle cose.
![Page 5: BEM - A naming philosophy that just works](https://reader033.vdocuments.mx/reader033/viewer/2022052915/58ce90c71a28ab8c3b8b56b9/html5/thumbnails/5.jpg)
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.
![Page 6: BEM - A naming philosophy that just works](https://reader033.vdocuments.mx/reader033/viewer/2022052915/58ce90c71a28ab8c3b8b56b9/html5/thumbnails/6.jpg)
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.
![Page 7: BEM - A naming philosophy that just works](https://reader033.vdocuments.mx/reader033/viewer/2022052915/58ce90c71a28ab8c3b8b56b9/html5/thumbnails/7.jpg)
Si ma chevvordì?
Block
Element
Modifier
![Page 8: BEM - A naming philosophy that just works](https://reader033.vdocuments.mx/reader033/viewer/2022052915/58ce90c71a28ab8c3b8b56b9/html5/thumbnails/8.jpg)
BlockElementModifierBlockElementModif
![Page 9: BEM - A naming philosophy that just works](https://reader033.vdocuments.mx/reader033/viewer/2022052915/58ce90c71a28ab8c3b8b56b9/html5/thumbnails/9.jpg)
● Componente stand-alone.
● Indipendente dal punto di vista funzionale.
● Possono essere nidificati ma senza avere rapporto gerarchico.
Block: Concetti Base
![Page 10: BEM - A naming philosophy that just works](https://reader033.vdocuments.mx/reader033/viewer/2022052915/58ce90c71a28ab8c3b8b56b9/html5/thumbnails/10.jpg)
Block: Esempio Visuale
![Page 11: BEM - A naming philosophy that just works](https://reader033.vdocuments.mx/reader033/viewer/2022052915/58ce90c71a28ab8c3b8b56b9/html5/thumbnails/11.jpg)
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.
![Page 12: BEM - A naming philosophy that just works](https://reader033.vdocuments.mx/reader033/viewer/2022052915/58ce90c71a28ab8c3b8b56b9/html5/thumbnails/12.jpg)
● 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
![Page 13: BEM - A naming philosophy that just works](https://reader033.vdocuments.mx/reader033/viewer/2022052915/58ce90c71a28ab8c3b8b56b9/html5/thumbnails/13.jpg)
BlockElementModifierBlockElementModif
![Page 14: BEM - A naming philosophy that just works](https://reader033.vdocuments.mx/reader033/viewer/2022052915/58ce90c71a28ab8c3b8b56b9/html5/thumbnails/14.jpg)
● 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
![Page 15: BEM - A naming philosophy that just works](https://reader033.vdocuments.mx/reader033/viewer/2022052915/58ce90c71a28ab8c3b8b56b9/html5/thumbnails/15.jpg)
Elemento: Esempio Visuale
![Page 16: BEM - A naming philosophy that just works](https://reader033.vdocuments.mx/reader033/viewer/2022052915/58ce90c71a28ab8c3b8b56b9/html5/thumbnails/16.jpg)
Elemento: Esempio codice 1
![Page 17: BEM - A naming philosophy that just works](https://reader033.vdocuments.mx/reader033/viewer/2022052915/58ce90c71a28ab8c3b8b56b9/html5/thumbnails/17.jpg)
● 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
![Page 18: BEM - A naming philosophy that just works](https://reader033.vdocuments.mx/reader033/viewer/2022052915/58ce90c71a28ab8c3b8b56b9/html5/thumbnails/18.jpg)
Elemento: Esempio codice 2
![Page 19: BEM - A naming philosophy that just works](https://reader033.vdocuments.mx/reader033/viewer/2022052915/58ce90c71a28ab8c3b8b56b9/html5/thumbnails/19.jpg)
Elemento: Esempio codice 3
![Page 20: BEM - A naming philosophy that just works](https://reader033.vdocuments.mx/reader033/viewer/2022052915/58ce90c71a28ab8c3b8b56b9/html5/thumbnails/20.jpg)
● Un componente può essere descritto da un mix di blocchi ed elementi.
Element: Altri Concetti
![Page 21: BEM - A naming philosophy that just works](https://reader033.vdocuments.mx/reader033/viewer/2022052915/58ce90c71a28ab8c3b8b56b9/html5/thumbnails/21.jpg)
● Un blocco può non avere elementi.
● Un blocco può esistere dentro un elemento
Block & Element: Altri Concetti
![Page 22: BEM - A naming philosophy that just works](https://reader033.vdocuments.mx/reader033/viewer/2022052915/58ce90c71a28ab8c3b8b56b9/html5/thumbnails/22.jpg)
BlockElementModifierBlockElementModif
![Page 23: BEM - A naming philosophy that just works](https://reader033.vdocuments.mx/reader033/viewer/2022052915/58ce90c71a28ab8c3b8b56b9/html5/thumbnails/23.jpg)
● 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
![Page 24: BEM - A naming philosophy that just works](https://reader033.vdocuments.mx/reader033/viewer/2022052915/58ce90c71a28ab8c3b8b56b9/html5/thumbnails/24.jpg)
Modificatore: Esempio di codice 1
![Page 25: BEM - A naming philosophy that just works](https://reader033.vdocuments.mx/reader033/viewer/2022052915/58ce90c71a28ab8c3b8b56b9/html5/thumbnails/25.jpg)
Modificatore: Esempio di codice 2
![Page 26: BEM - A naming philosophy that just works](https://reader033.vdocuments.mx/reader033/viewer/2022052915/58ce90c71a28ab8c3b8b56b9/html5/thumbnails/26.jpg)
● en.bem.info/methodology/quick-start/
● getbem.com/
● www.youtube.com/watch?v=IO-4Z32O--c (7 minutes video)
Links
![Page 27: BEM - A naming philosophy that just works](https://reader033.vdocuments.mx/reader033/viewer/2022052915/58ce90c71a28ab8c3b8b56b9/html5/thumbnails/27.jpg)
● Pattern 7-in-1 (parte di Sass Guidelines): sass-guidelin.es/it
● ITCSS: youtube.com/watch?v=1OKZOV-iLj4
Bonus
![Page 28: BEM - A naming philosophy that just works](https://reader033.vdocuments.mx/reader033/viewer/2022052915/58ce90c71a28ab8c3b8b56b9/html5/thumbnails/28.jpg)