Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

BEM - A naming philosophy that just works

149 views

Published on

Presentazione tenuta al FEVR (Front End Verona) il 26/01/2017

Published in: Sports
  • Hey guys! Who wants to chat with me? More photos with me here 👉 http://www.bit.ly/katekoxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

BEM - A naming philosophy that just works

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

×