BEM

210a2116d2266c84d155f1d8a14f31ef?s=47 FEVR
February 23, 2017

 BEM

210a2116d2266c84d155f1d8a14f31ef?s=128

FEVR

February 23, 2017
Tweet

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
  3. None
  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
  28. None