Upload
alessandro-muraro
View
16
Download
2
Embed Size (px)
Citation preview
BEMA naming philosophy that just works
Per fortuna c’è BEM
BEM ci dà regole per dare nomi alle cose.
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.
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.
Si ma chevvordì?
Block
Element
Modifier
BlockElementModifierBlockElementModif
● Componente stand-alone.
● Indipendente dal punto di vista funzionale.
● Possono essere nidificati ma senza avere rapporto gerarchico.
Block: Concetti Base
Block: Esempio Visuale
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.
● 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
BlockElementModifierBlockElementModif
● 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
Elemento: Esempio Visuale
Elemento: Esempio codice 1
● 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
Elemento: Esempio codice 2
Elemento: Esempio codice 3
● Un componente può essere descritto da un mix di blocchi ed elementi.
Element: Altri Concetti
● Un blocco può non avere elementi.
● Un blocco può esistere dentro un elemento
Block & Element: Altri Concetti
BlockElementModifierBlockElementModif
● 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
Modificatore: Esempio di codice 1
Modificatore: Esempio di codice 2
● en.bem.info/methodology/quick-start/
● getbem.com/
● www.youtube.com/watch?v=IO-4Z32O--c (7 minutes video)
Links
● Pattern 7-in-1 (parte di Sass Guidelines): sass-guidelin.es/it
● ITCSS: youtube.com/watch?v=1OKZOV-iLj4
Bonus