SASS e BEM

Questo articolo spiega SASS e BEM.

Spiegheremo i concetti e i metodi di implementazione per prevenire la confusione e la fragilità che tendono a verificarsi quando il CSS diventa di grandi dimensioni, utilizzando SASS e BEM, con esempi concreti.

YouTube Video

SASS e BEM

Con l'aumentare del numero di file e schermate, il CSS tende a presentare problemi come 'Non so dove sia definito questo stile' e 'Una piccola modifica ha alterato l'aspetto su un'altra schermata.'.

Ciò accade perché il CSS è intrinsecamente un linguaggio che non impone regole di progettazione. Se si continua a scrivere così com'è, le dipendenze non previste aumenteranno.

SASS e BEM sono tecniche pratiche che trasformano il CSS da qualcosa che si scrive ad hoc a qualcosa che si progetta e si gestisce, prevenendo così questi problemi. Combinando i due, si può chiarire il significato degli stili e allo stesso tempo migliorare la leggibilità, la riutilizzabilità e la manutenibilità.

Motivi per cui il CSS diventa facilmente ingestibile

Un CSS come il seguente può diventare difficile da capire come si comporta quando si rivede il codice in seguito.

 1.title {
 2  font-size: 16px;
 3  color: #333;
 4}
 5
 6.container .title {
 7  font-size: 18px;
 8}
 9
10.sidebar .container .title {
11  color: red;
12}

• In questo esempio, la stessa classe .title appare diversa a seconda di dove sia posizionata, quindi non è immediatamente chiaro quale stile verrà applicato a questa .title.
• In questo modo, man mano che i selettori diventano più profondi e dipendenti dagli elementi genitori, il CSS diventa più difficile da prevedere in termini di ambito di influenza e diventa soggetto a rotture quando viene modificato.

BEM è una convenzione di nomenclatura che 'esprime i ruoli attraverso i nomi'

BEM sta per Blocco / Elemento / Modificatore e include nel nome quale componente rappresenta la classe e in quale stato si trova.

• Blocco è un componente indipendente.
• Elemento è un elemento interno del Blocco.
• Modificatore rappresenta uno stato o una variazione.

1.card {}
2.card__title {}
3.card--highlighted {}

Grazie a questa convenzione di nomenclatura, è possibile dedurre la struttura e il ruolo semplicemente guardando l'HTML.

Forma base di HTML utilizzando BEM

Ecco un esempio di interfaccia 'card' espressa in HTML usando BEM.

1<div class="card card--highlighted">
2  <h2 class="card__title">Title</h2>
3  <p class="card__text">Description</p>
4</div>

Dai soli nomi delle classi, si capisce che questo è un 'componente card', 'il titolo al suo interno' e lo 'stato enfatizzato'. Questo è il principale vantaggio di BEM.

Tuttavia, solo BEM può portare ad un CSS verbose.

Se si scrive BEM così com'è nel CSS, la quantità di codice tende ad aumentare.

 1.card {
 2  padding: 16px;
 3}
 4
 5.card__title {
 6  font-size: 18px;
 7}
 8
 9.card__text {
10  font-size: 14px;
11}
12
13.card--highlighted {
14  border: 2px solid orange;
15}

Qui, utilizzando SASS, si può avere codice organizzato che mantiene la struttura.

Esprimere in modo naturale BEM con il nesting di SASS

Utilizzando il nesting di SASS, è possibile riflettere direttamente la struttura di BEM nel proprio codice.

 1.card {
 2  padding: 16px;
 3
 4  &__title {
 5    font-size: 18px;
 6  }
 7
 8  &__text {
 9    font-size: 14px;
10  }
11
12  &--highlighted {
13    border: 2px solid orange;
14  }
15}

& si riferisce al selettore genitore e funziona molto bene con la nomenclatura BEM.

CSS generato da questo SASS

Il SASS sopra è compilato in CSS come il seguente.

 1.card {
 2  padding: 16px;
 3}
 4
 5.card__title {
 6  font-size: 18px;
 7}
 8
 9.card__text {
10  font-size: 14px;
11}
12
13.card--highlighted {
14  border: 2px solid orange;
15}

Anche se l'aspetto è lo stesso, il carico cognitivo per lo sviluppatore è notevolmente ridotto.

Progettazione per un uso sicuro dei Modificatori

Poiché i Modificatori in BEM rappresentano 'stati', la chiave è limitarli all'uso per le sovrascritture.

 1.button {
 2  padding: 8px 12px;
 3  background: #eee;
 4
 5  &--primary {
 6    background: blue;
 7    color: white;
 8  }
 9
10  &--disabled {
11    opacity: 0.5;
12    pointer-events: none;
13  }
14}

La progettazione diventa più stabile se i Modificatori sono trattati non come 'aggiunte' ma come 'variazioni'.

Limitare il nesting degli Elementi a un solo livello

In BEM è importante non annidare gli elementi troppo in profondità.

1.card {
2  &__header {
3    font-weight: bold;
4  }
5
6  &__body {
7    margin-top: 8px;
8  }
9}

Elementi multilivello come .card__header__title sono un segno che dovresti considerare di separare il Blocco.

Un esempio di struttura dei file SASS

Infine, ecco un esempio di una struttura SASS pratica per progetti reali.

1styles/
2├── base/
3│   └── reset.scss
4├── components/
5│   ├── card.scss
6│   └── button.scss
7├── layout/
8│   └── header.scss
9└── main.scss

Se gestisci ogni componente come 1 blocco = 1 file, è meno probabile che si verifichino problemi.

Esempio di card.scss

 1.card {
 2  padding: 16px;
 3  border: 1px solid #ccc;
 4
 5  &__title {
 6    font-size: 18px;
 7  }
 8
 9  &__text {
10    color: #666;
11  }
12}

Poiché tutto è autonomo in questa unità, cancellazione, spostamento e riutilizzo diventano facili.

Riepilogo

SASS e BEM non sono solo tecniche di tendenza—sono approcci pratici per trasformare il CSS in codice progettabile.

• BEM assegna nomi al significato e al ruolo.
• SASS consente una scrittura semplice mantenendo la struttura.
• Combinando entrambi il CSS è meno soggetto a rotture.

Scriviamo oggi il CSS in modo che il tuo io futuro possa capirlo.

Puoi seguire l'articolo sopra utilizzando Visual Studio Code sul nostro canale YouTube. Controlla anche il nostro canale YouTube.

YouTube Video