Riprendiamo il viaggio nelle best-practice nell'utilizzo di CSS e HTML introducendo un metodo di scrittura per il CSS che ci tornerà utile per la creazione di regole riguardanti i vari stili che gli elementi HTML dovranno avere sulla pagina.

Questo standard prende il nome di BEM (Block Element Modifier) e basa i suoi principi sul riconoscimento della zona (blocco) di pagina in cui l'elemento andrà a inserirsi e le varie modifiche che potrà avere.

In linea di massima possiamo identificare delle zone HTML comuni, come header, content, nav, footer o definirne di proprie come una sezione carrello all'interno di un sito di ecommerce. Nel blocco troviamo vari elementi come liste, bottoni, labels, paragrafi che possono variare il proprio aspetto a seconda delle azioni dell'utente o allo stato della pagina.

Immaginiamo quindi di definire degli stili per il bottone di checkout del blocco cart.

/* regole comuni */
.cart__checkout{
    margin: 0;
    padding: 5px 10px;
    background-color: blue;
}
/* bottone rosso */
.cart__checkout--red{
    background-color: red;
}
/* bottone verde */
.cart__checkout--green{
    background-color: green;
}

La sintassi BEM richiede una scrittura del tipo Blocco__Elemento--Modificatore il che rende molto più capibile il contesto di utilizzo di ogni singola classe.

Se scrivendo CSS questa sintassi potrebbe risultare prolissa, con l'utilizzo di un precompilatore SCSS troviamo invece enormi vantaggi, in quanto il codice risulterà molto più leggibile. In questo caso possiamo utilizzare diverse metodologie di scrittura: la prima consiste nell'estendere il modificatore utilizzando la classe base, la seconda crea invece la stessa struttura che avremmo se scrivessimo in CSS.

/* Prima sintassi */
/* regole comuni */
.cart__checkout{
    margin: 0;
    padding: 5px 10px;
    background-color: blue;
}
/* bottone rosso */
.cart__checkout--red{
    @extend .cart__checkout;
    background-color: red;
}
/* bottone verde */
.cart__checkout--green{
    @extend .cart__checkout;
    background-color: green;
}


/* Seconda sintassi */
.cart__checkout{
    margin: 0;
    padding: 5px 10px;
    background-color: blue;

    &--red{
        background-color: red;
    }
    
    &--green{
        background-color: green;
    }
}

Nel primo snippet si potrà utilizzare solo la classe modificatore per avere tutti gli stili applicati, nel secondo dovremmo invece specificare la classe base per poi applicare il modificatore.

<!-- prima sintassi -->
<button class="cart__checkout--red">Checkout</button>
<!-- secondsa sintassi -->
<button class="cart__checkout cart__checkout--red">Checkout</button>