$30 off During Our Annual Pro Sale. View Details »

BEM - a naming convention that just works

Alex Muraro
December 21, 2016

BEM - a naming convention that just works

Un talk sulla metodologia BEM in italiano.

Alex Muraro

December 21, 2016
Tweet

More Decks by Alex Muraro

Other Decks in Technology

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