BEM - a naming convention that just works

Un talk sulla metodologia BEM in italiano.

Transcript

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