BEM + SCSS: un piccolo tutorial per dev furbi

BEM in due parole (anzi tre)

BEM sta per Block, Element, Modifier e sostanzialmente è un sistema di naming per il codice HTML e CSS che aiuta a:

• mantenere il codice leggibile;
• organizzare meglio i componenti;
• evitare conflitti di stile;
• scrivere SCSS scalabile e riutilizzabile.

Vediamo meglio il significato di ognuno dei tre pillar Block, Element e Modifier.

Con Block si intende un componente autonomo e riutilizzabile, per esempio

<div class="card">...</div>

Element è una parte del blocco, che “non ha vita propria”. Esempio:

<div class="card__title">Titolo</div>

Ultimo, ma non meno importante, abbiamo Modifier che rappresenta una variazione del blocco o dell’elemento:

<div class="card card--featured">...</div>

BEM + SCSS: un esempio

Per te, un esempio di codice HTML e CSS scritto applicando l’approccio BEM.

<div class="card card--highlighted">
    <h2 class="card__title">Titolo</h2>
    <p class="card__text">Testo</p>
    <a class="card__button card__button--primary">Scopri</a>
</div>

Questo invece, un blocco scritto utilizzando il formato SCSS.

.card {
  &--highlighted { ... }

  &__title { ... }
  &__text { ... }

  &__button {
    &--primary { ... }
    &--secondary { ... }
  }
}

Come ho scritto a inizio articolo, il codice risulta più ordinato, leggibile e modulare.

Ma quindi, perché adottare l’approccio con BEM?

BEM può davvero fare la differenza nei progetti di media e grande dimensione:

• il CSS resta modulare, evitando conflitti tra componenti;
• i nomi delle classi sono semantici e chiari — non più .big-blue-button-v2-ne;
• è facile riutilizzare componenti da un progetto all’altro, senza complicazioni;
• funziona perfettamente sia in team piccoli che in gruppi più numerosi;
• risulta più semplice e coerente rispetto ad altri approcci come SMACSS o OOCSS.

Per convincerti ulteriormente su BEM e SCSS, eccoti due esempi per React e Angular.

L’approccio BEM applicato in React e Angular

Il seguente codice definisce un componente React applicando la metodologia BEM.

export default function Card({ title, isFeatured }) {
 return (
    <div className={`card ${isFeatured ? 'card--featured' : ''}`}>
      <h2 className="card__title">{title}</h2>
      <p className="card__description">Testo descrittivo</p>
      <button className="card__button card__button--primary">
        Vai
      </button>
    </div>
  );
}

In Angular invece, BEM è applicato come nell’esempio seguente che definisce il componente card.component.html.

<div class="card" [ngClass]="{ 'card--featured': isFeatured }">
  <h2 class="card__title">{{ title }}</h2>
  <p class="card__text">Descrizione</p>
  <button class="card__button card__button--secondary">Aziona</button>
</div>

Alcuni errori classici da evitare con BEM

Adottando l’approccio BEM nei file del progetto avrai sicuramente un naming più chiaro oltre che:

• una gerarchia visiva solamente leggendo i nomi;
• sapere dove “vive” ogni classe;
• poter riutilizzare con facilità i componenti.

Next step con BEM

Puoi combinare la metodologia BEM con diverse direttive di SCSS per migliorare la modularità e la manutenzione del codice:

• @mixin per generare modificatori in modo dinamico;
• @extend %placeholders per riutilizzare gli stili di base;
• @use / @forward per organizzare una struttura SCSS più modulare e scalabile.

Qualche tip prima di salutarti

Conclusione

BEM è il Marie Kondō del CSS: porta ordine, chiarezza e coerenza nel tuo codice. Non è una regola assoluta, ma una metodologia intelligente per strutturare in modo pulito e scalabile i tuoi stylesheet.
In combinazione con SCSS, diventa uno strumento ancora più potente per migliorare la manutenzione e la leggibilità del codice.