Abbiamo visto come SASS ci permetta di migliorare la stesura dei fogli di stile. Per rendere ancora più leggibile il nostro codice possiamo implementare lo standard BEM (Block Element Modifier).
L’idea che sta alla base della metodologia BEM è quella di definire alcune regole per la definizione delle classi degli elementi basandosi sulle proprietà degli elementi stessi. La definizione delle classi si basa su tre componenti: il blocco, l’elemento e la variante.
Il blocco è il contenitore o il contesto in cui l’elemento si trova. È un entità indipendente che può essere semplice o composta da ulteriori blocchi. Possiamo ad esempio dividere una semplice pagina Web in quattro blocchi: header
, content
, sidebar
e footer
. Questi blocchi costituiranno la base delle nostre classi CSS.
Il secondo componente della metodologia BEM è l’elemento. L’elemento è un singolo componente inserito in un blocco. Esempi di elementi sono un logo, un input, un link.
La classe di ogni elemento viene definita da un nome semplice, chiaro e univoco preceduto dal blocco e da due underscore:
blocco__elemento
La classe identificativa del logo sarà, ad esempio:
header__logo
mentre quella dei link di navigazione sarà:
header__link
L’ultimo componente da valutare è la variante che definisce versioni differenti di un elemento.
La variante andrà specificata come terzo parametro della classe e verrà separata dall’elemento con due trattini. Possiamo ad esempio identificare i link di navigazione come:
header__link
e i link selezionati come:
header__link--selected
Con queste tre semplici componenti andremo a definire le classi di tutti i tag della nostra pagina HTML.
Spesso la variante modifica solamente una proprietà di un elemento: colore, font, background. Supponiamo di aver definito una classe per i link presenti nell’header:
.header__link
{
font-size: 14px;
font-weight: bold;
text-decoration: none;
color: #000;
}
Abbiamo ora la necessità di definire una variante di questi link con colore del testo rosso. Seguendo la metodologia BEM dovremmo creare una variante:
.header__link--red
{
color: #FF0000;
}
Dovremmo poi arricchire il nostro elemento con entrambe le classi:
<a href="http://html.it" class="header__link header__link--red">HTML.it</a>
In alternativa possiamo sfruttare SASS ed in particolare la funzione di @extend e modificare il precedente codice in questo modo:
.header__link
{
font-size: 14px;
font-weight: bold;
text-decoration: none;
color: #000;
}
.header__link--red
{
@extend .header__link;
color: #FF0000;
}
<a href="http://html.it" class="header__link--red">HTML.it</a>
Con questa soluzione, ogni modifica sulla classe header__link
andrà a modificare anche le varianti.
Se vuoi aggiornamenti su CSS inserisci la tua e-mail nel box qui sotto:
Tutti i linguaggi per diventare uno sviluppatore di app per Android.
Come creare applicazioni per il Web con PHP e MySQL per il DBMS.
Tutte le principali tecnologie per diventare uno sviluppatore mobile per iOS.
I fondamentali per lo sviluppo di applicazioni multi piattaforma con Java.
Diventare degli esperti in tema di sicurezza delle applicazioni Java.
Usare Raspberry Pi e Arduino per avvicinarsi al mondo dei Maker e dell’IoT.
Le principali guide di HTML.it per diventare un esperto dei database NoSQL.
Ecco come i professionisti creano applicazioni per il Cloud con PHP.
Lo sviluppo professionale di applicazioni in PHP alla portata di tutti.
Come sviluppare applicazioni Web dinamiche con PHP e JavaScript.
Realizzare applicazioni per il Web utilizzando i framework PHP.
Creare applicazioni PHP e gestire l’ambiente di sviluppo come un pro.
Fare gli eCommerce developer con Magento, Prestashop e WooCommerce.
Percorso base per avvicinarsi al web design con un occhio al mobile.
Realizzare siti Web e Web application con WordPress a livello professionale.
Un preprocessore CSS serve a definire fogli di stile con una forma più semplice, completa e potente rispetto ai CSS e a generare file CSS ottimizzati, aggregando le strutture definite anche in modo complesso . Esistono diversi preprocessori CSS tra cui orientarsi, la nostra scelta cade su SASS, che si distingue per completezza, stabilità, estensibilità e integrazione con gli altri componenti tipici di uno stack Web moderno.
L'utilizzo dell'annidamento dei selettori è una pratica comune, e in alcuni casi anche utile. Tuttavia essa presenta vantaggi e svantaggi: ecco quali.