bem - a naming philosophy that just works

BEMA naming philosophy that just works

Ciao, sonoAlessandro MuraroFront End Developer @ Objectway

Organizer @ Milano Front End Meetup

Su Twitter sono @akmur

Il mio sito é alexmuraro.me

Per fortuna c’è BEM

BEM é un insieme di regole

per dare nomi alle cose.

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.

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.

Si ma chevvordì?

Block

Element

Modifier

BlockElementModifierBlockElementModif

● Componente stand-alone.

● Indipendente dal punto di vista funzionale.

● Possono essere nidificati ma senza avere rapporto gerarchico.

Block: Concetti Base

Block: Esempio Visuale

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.

● 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

BlockElementModifierBlockElementModif

● 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

Elemento: Esempio Visuale

Elemento: Esempio codice 1

● 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

Elemento: Esempio codice 2

Elemento: Esempio codice 3

● Un componente può essere descritto da un mix di blocchi ed elementi.

Element: Altri Concetti

● Un blocco può non avere elementi.

● Un blocco può esistere dentro un elemento

Block & Element: Altri Concetti

BlockElementModifierBlockElementModif

● 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

Modificatore: Esempio di codice 1

Modificatore: Esempio di codice 2

● en.bem.info/methodology/quick-start/

● getbem.com/

● www.youtube.com/watch?v=IO-4Z32O--c (7 minutes video)

Links

● Pattern 7-in-1 (parte di Sass Guidelines): sass-guidelin.es/it

● ITCSS: youtube.com/watch?v=1OKZOV-iLj4

Bonus