BEM - a naming convention that just works

Slide 1

Slide 1 text

BEM A naming philosophy that just works

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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.

Slide 5

Slide 5 text

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.

Slide 6

Slide 6 text

Si ma chevvordì? Block Element Modifier

Slide 7

Slide 7 text

BlockElement ModifierBlock ElementModif

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

Block: Esempio Visuale

Slide 10

Slide 10 text

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.

Slide 11

Slide 11 text

● 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

Slide 12

Slide 12 text

BlockElement ModifierBlock ElementModif

Slide 13

Slide 13 text

● 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

Slide 14

Slide 14 text

Elemento: Esempio Visuale

Slide 15

Slide 15 text

Elemento: Esempio codice 1

Slide 16

Slide 16 text

● 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

Slide 17

Slide 17 text

Elemento: Esempio codice 2

Slide 18

Slide 18 text

Elemento: Esempio codice 3

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

BlockElement ModifierBlock ElementModif

Slide 22

Slide 22 text

● 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

Slide 23

Slide 23 text

Modificatore: Esempio di codice 1

Slide 24

Slide 24 text

Modificatore: Esempio di codice 2

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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