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