BEM - a naming convention that just works

7fa6101cd43067653cf4ac6c7ca54305?s=47 Alex Muraro
December 21, 2016

BEM - a naming convention that just works

Un talk sulla metodologia BEM in italiano.

7fa6101cd43067653cf4ac6c7ca54305?s=128

Alex Muraro

December 21, 2016
Tweet

Transcript

  1. BEM A naming philosophy that just works

  2. None
  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