Usare BEM con SCSS | Scrivere facilmente CSS manutenibili

Indice

1 Cos’è BEM?
2 Gestiamo i blocchi (Block)
3 Gestiamo gli elementi (Element)
4 Gestiamo i modificatori (Modifier)
5 Usiamo SCSS
6 Conclusione

Ciao! In questo articolo ho deciso di parlare di come sto approcciando ultimamente la scrittura dei miei fogli di stile, in particolare di come applicare la metodologia BEM a SCSS per facilitarmi la stesura di codice ripetitivo. Ma partiamo dalla base:

Cos’è BEM?

Per spiegare cos’è BEM partiamo dalla definizione presente su getbem.com

BEM — Block Element Modifier is a methodology that helps you to create reusable components and code sharing in front-end development

In pratica quando usiamo l’acronimo BEM non intendiamo nessun nuovo tool, framework o prodotto, bensì stiamo parlando di una metodologia per scrivere il nostro CSS in maniera corretta, riusabile e manutenibile

Se non conosci ancora questa metodologia e sei interessato ad approfondire il tutto puoi partire da qui.

Adesso andrò a sviluppare un blocco con degli elementi e modificatori e poi successivamente ti farò vedere come il tutto viene snellito tramite l’uso di SCSS.

Gestiamo i blocchi (Block)

Un “blocco” in BEM è considerato come un’entità autonoma. Non deve mai dipendere da nessun’altra parte del tuo DOM. Questo lo rende riusabile e trasferibile in qualsiasi momento.

Vediamo ora come si gestisce un blocco con del semplice CSS

<div class="block">
    <p>Block</p>
</div>

<p>Block</p>

</div>

.block {
    width: 100%;
    color: white;
    background-color: black;
}

.block {

width: 100%;

color: white;

background-color: black;

}

Una volta definito il nostro bel blocco passiamo agli elementi (Element)

Gestiamo gli elementi (Element)

Gli elementi non sono altro che la parte di un blocco.

Esistono delle regole ben precisi per gli elementi:

Ogni elemento è legato semanticamente al suo blocco.
Ogni nodo del DOM all’interno di un blocco definito può essere un elemento.
All’interno di un determinato blocco, tutti gli elementi sono semanticamente uguali.

Prendiamo l’esempio di prima e aggiungiamo un elemento:

<div class="block">
    <div class="block__element">
        <p>Element inside block</p>
    </div>
</div>

<p>Element inside block</p>

</div>

.block {
    width: 100%;
    color: white;
    background-color: black;    
}

.block__element {
    padding: 10px 15px;
}

.block {

width: 100%;

color: white;

background-color: black;

}

.block__element {

padding: 10px 15px;

}

Semplice vero? Passiamo adesso ai modificatori

Gestiamo i modificatori (Modifier)

I modificatori non sono altro dei flag che possono essere applicati ai blocchi o agli elementi per definirne lo stato

<div class="block block--white">
    <div class="block__element">
        <p>Block element with modified</p>
    </div>
</div>

<p>Block element with modified</p>

</div>

.block {
    width: 100%;
    color: white;
    display: block;
    background-color: black;
}

.block.block--white {
    color: black;
    background-color: white;
}

.block__element {
    padding: 10px 15px;
}

.block {

width: 100%;

color: white;

display: block;

background-color: black;

}

.block.block--white {

color: black;

background-color: white;

}

.block__element {

padding: 10px 15px;

}

In questo caso il modificatore .block--white farà diventare i blocchi a cui è applicato che di base hanno sfondo nero e colore del testo bianco, con sfondo bianco e colore del testo nero. Inizi a capire come un semplice modificatore può permetterti di “riciclare” codice HTML e CSS?

Ora logicamente ogni blocco può avere un variato numero di modificatori, che quando cresce può allungare di parecchio il nostro CSS

.block.block--white {
    color: black;
    background-color: white;
}

.block.block--red {
   color: white;
   background-color: red;
}

.block.block--blue {
    color: white;
    background-color: blue;        
}

[...]

.block.block--white {

color: black;

background-color: white;

}

.block.block--red {

color: white;

background-color: red;

}

.block.block--blue {

color: white;

background-color: blue;

}

[...]

Quindi è giunto il momento di ottimizzare un po’ la scrittura del nostro foglio di stile e SCSS fa proprio al caso nostro

Usiamo SCSS

Rivediamo l’esempio scritto utilizzando però SCSS e l’operatore & che può venirci in soccorso

.blockname {

    width: 100%;
    color: white;
    display: block;
    background-color: black;

    &__element {
        padding: 10px 15px;
    }

    &#{&}--white {
        color: black;
        background-color: white;
    }

    &#{&}--red {
        color: white;
        background-color: red;
    }

    &#{&}--blue {
        color: white;
        background-color: blue;        
    }

}

.blockname {

width: 100%;

color: white;

display: block;

background-color: black;

&__element {

padding: 10px 15px;

}

&#{&}--white {

color: black;

background-color: white;

}

&#{&}--red {

color: white;

background-color: red;

}

&#{&}--blue {

color: white;

background-color: blue;

}

Una volta compilato il nostro codice porterà ad avere questo risultato:

/** COMPILED CSS **/

.blockname {
    width: 100%;
    color: white;
    display: block;
    background-color: black;
}

.blockname__element {
    padding: 10px 15px;
}

.blockname.blockname--white {
    color: black;
    background-color: white;
}

.blockname.blockname--red {
    color: white;
    background-color: red;
}

.blockname.blockname--blue {
    color: white;
    background-color: blue;
}

/** COMPILED CSS **/

.blockname {

width: 100%;

color: white;

display: block;

background-color: black;

}

.blockname__element {

padding: 10px 15px;

}

.blockname.blockname--white {

color: black;

background-color: white;

}

.blockname.blockname--red {

color: white;

background-color: red;

}

.blockname.blockname--blue {

color: white;

background-color: blue;

}

Fenomenale vero? Con un singolo operatore evitiamo le ripetizioni del nome del blocco ottimizzando il tutto.

Logicamente l’operatore & non è l’unica cosa che può aiutarci nella scrittura, ricordiamoci anche che esistono le variabili!

.blockname {

    $b: &; // Lo scope di $b rimane nel suo parent .blockname e non può essere utilizzata fuori!

    width: 100%;
    color: white;
    display: block;
    background-color: black;

    &__element {
        padding: 10px 15px;
    }

    &#{$b}--white {

        color: black;
        background-color: white;

        #{$b}__element {
            color: orange;
        }

    }

    &#{$b}--red {
        color: white;
        background-color: red;
    }

    &#{$b}--blue {
        color: white;
        background-color: blue;        
    }

}

.blockname {

$b: &; // Lo scope di $b rimane nel suo parent .blockname e non può essere utilizzata fuori!

width: 100%;

color: white;

display: block;

background-color: black;

&__element {

padding: 10px 15px;

}

&#{$b}--white {

color: black;

background-color: white;

#{$b}__element {

color: orange;

}

&#{$b}--red {

color: white;

background-color: red;

}

&#{$b}--blue {

color: white;

background-color: blue;

}

La compilazione del codice qui sopra sarà uguale a quella riproposta prima, sta a te scegliere la strada che preferisci per ottimizzare il tutto.

Conclusione

All’inizio BEM è abbastanza odioso, ma alla fine, una volta appresa la metodologia, mi ha reso la vita molto più semplice e il mio codice molto più manutenibile. Logicamente ci saranno altre strade per scrivere BEM in SCSS, se usi metodi alternativi, scrivili nei commenti!

Alla prossima 😀