BEM - a naming convention that just works

Transcript

1. BEM
   A naming philosophy that just works
   

   View Slide

2. View Slide

3. Per fortuna c’è BEM
   BEM ci dà regole per dare nomi alle cose.
   

   View Slide

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.
   

   View Slide

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.
   

   View Slide

6. Si ma chevvordì?
   Block
   Element
   Modifier
   

   View Slide

7. BlockElement
   ModifierBlock
   ElementModif
   

   View Slide

8. ● Componente stand-alone.
   ● Indipendente dal punto di vista funzionale.
   ● Possono essere nidificati ma senza avere rapporto gerarchico.
   Block: Concetti Base
   

   View Slide

9. Block: Esempio Visuale
   

   View Slide

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.
    

    View Slide

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
    

    View Slide

12. BlockElement
    ModifierBlock
    ElementModif
    

    View Slide

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
    

    View Slide

14. Elemento:
    Esempio Visuale
    

    View Slide

15. Elemento: Esempio codice 1
    

    View Slide

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
    

    View Slide

17. Elemento: Esempio codice 2
    

    View Slide

18. Elemento: Esempio codice 3
    

    View Slide

19. ● Un componente può essere descritto da un mix di blocchi ed elementi.
    Element: Altri Concetti
    

    View Slide

20. ● Un blocco può non avere elementi.
    ● Un blocco può esistere dentro un elemento
    Block & Element: Altri Concetti
    

    View Slide

21. BlockElement
    ModifierBlock
    ElementModif
    

    View Slide

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
    

    View Slide

23. Modificatore: Esempio di codice 1
    

    View Slide

24. Modificatore: Esempio di codice 2
    

    View Slide

25. ● en.bem.info/methodology/quick-start/
    ● getbem.com/
    ● www.youtube.com/watch?v=IO-4Z32O--c (7 minutes video)
    Links
    

    View Slide

26. ● Pattern 7-in-1 (parte di Sass Guidelines): sass-guidelin.es/it
    ● ITCSS: youtube.com/watch?v=1OKZOV-iLj4
    Bonus
    

    View Slide