BEM

Transcript

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