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.
● Componente stand-alone. ● Indipendente dal punto di vista funzionale. ● Possono essere nidificati ma senza avere rapporto gerarchico. Block: Concetti Base
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
● 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
● 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
● 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