Promuovi un elemento BEM quando ha uno scopo coerente e può gestire la propria implementazione al di fuori del blocco padre. Usa l’esercizio locale per Mac qui sotto per verificare questo confine prima di rinominare le classi o spostare il CSS.

Che cosa rende indipendente un elemento?

Per chi gestisce una pagina HTML scritta a mano, la domanda pratica è se una sezione in espansione debba restare parte del suo elemento padre o diventare un blocco gestito separatamente. BEM definisce un blocco come un componente logicamente e funzionalmente indipendente; un elemento appartiene a un blocco e non può essere usato indipendentemente da esso. I blocchi possono contenere altri blocchi. Concetti chiave

Considera una pagina sintetica contenente un blocco workbench. Il suo workbench__preview contiene una forma astratta, un’etichetta e una didascalia. Inizialmente, tutti e tre servono solo al banco di lavoro. In seguito, la stessa anteprima serve in una sezione stretta shelf. Questa seconda collocazione offre un compito concreto di estrazione: determinare se l’anteprima può diventare un blocco shape-tile con un proprio aspetto e una propria struttura interna.

La profondità da sola non determina la scelta. BEM consente elementi annidati nel DOM mantenendo i nomi piatti: workbench__preview, workbench__label e workbench__caption. Un nome come workbench__preview__caption esprime erroneamente l’appartenenza di un elemento a un altro elemento. Anche la guida introduttiva ufficiale riconosce il blocco di servizio come un’opzione quando un elemento complesso necessita di parti interne organizzate in modo indipendente. Guida introduttiva

È utile distinguere tra spostare il markup in un modello separato per migliorare la leggibilità e definire un nuovo blocco BEM. Puoi apportare la prima modifica senza impegnarti subito nella seconda. Rendi esplicito il confine del blocco quando riesci a descrivere di cosa è responsabile la parte estratta, cosa fornisce il contenitore e come verrà usata in un’altra collocazione.

Verifica le dipendenze prima di estrarre

Il seguente strumento decisionale è un metodo editoriale derivato dal principio di indipendenza di BEM. Non è un sistema ufficiale di punteggio. Applicalo a un singolo sottoalbero candidato, anziché valutare l’intera pagina in una volta.

Domanda Elementi a favore dell’estrazione Motivo per mantenere l’elemento
Ha uno scopo chiaro? “Mostra una forma con un’etichetta e una didascalia” Il suo unico scopo è “fare da contenitore interno al banco di lavoro”
Può gestire la propria presentazione interna? Bordo, spaziatura e tipografia si spostano insieme Queste regole sono inseparabili dalla struttura del padre
Il contenitore può gestire separatamente il posizionamento? Il contenitore controlla lo spazio disponibile e gli spazi circostanti L’elemento candidato richiede uno specifico layout antenato
Le sue varianti lo descrivono? Una scheda compatta ha senso in diverse collocazioni Ogni variante prende il nome da un particolare elemento padre
La gestione separata sarebbe utile ora? Esiste una seconda collocazione o una responsabilità interna sostanziale L’estrazione aggiungerebbe un’interfaccia senza un’utilità attuale

Prima di modificare il codice, scrivi una frase: “shape-tile gestisce la propria forma, etichetta, didascalia e spaziatura interna; il contenitore gestisce il posizionamento e la larghezza disponibile”. Se la frase continua a includere la disposizione in colonne del banco di lavoro o l’ordine degli elementi fratelli, riconsidera dove collocare il confine.

Separa il layout esterno dall’aspetto interno. Le indicazioni CSS di BEM assegnano geometria e posizionamento esterni al padre e mostrano come combinare sulla stessa entità la classe di un blocco indipendente con quella di un elemento padre. Questa combinazione si chiama mix. Metodologia CSS

Per esempio, class="shape-tile workbench__preview" può esprimere entrambe le identità. Lascia che shape-tile definisca il bordo e il layout interno, e che workbench__preview definisca il posizionamento. Evita di assegnare la stessa proprietà tramite entrambe le identità, a meno che la sovrascrittura non sia una parte intenzionale del contratto.

Crea un confronto locale sul tuo Mac

Crea una nuova cartella per questo esercizio, così potrai confrontare il design estratto senza modificare una pagina esistente. Ti servono un editor di testo semplice e un browser desktop; l’esempio non richiede installazioni di pacchetti, JavaScript, font scaricati o file immagine.

In TextEdit, scegli File > Nuovo, poi Formato > Converti in testo semplice. Incolla l’HTML qui sotto e salvalo come index.html, scegliendo Usa .html se richiesto. Apple documenta questi passaggi e spiega anche come riaprire l’HTML come codice sorgente usando Ignora comandi di testo formattato. Lavorare con documenti HTML in TextEdit sul Mac

Crea il documento HTML completo

Questo documento colloca lo stesso componente proposto in due contenitori. Tutte le etichette sono sintetiche e la forma astratta è disegnata con CSS. Salva quanto segue come index.html.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Shape tile boundary exercise</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body class="demo">
  <h1>Shape tile boundary exercise</h1>
  <main class="demo__regions">
    <section class="workbench">
      <h2>Workbench A</h2>
      <div class="shape-tile workbench__preview">
        <span class="shape-tile__shape" aria-hidden="true"></span>
        <div class="shape-tile__content">
          <h3 class="shape-tile__label">Form A</h3>
          <p class="shape-tile__caption">Rounded sample, first arrangement.</p>
        </div>
      </div>
    </section>
    <section class="shelf">
      <h2>Shelf B</h2>
      <div class="shape-tile shelf__preview">
        <span class="shape-tile__shape" aria-hidden="true"></span>
        <div class="shape-tile__content">
          <h3 class="shape-tile__label">Form B</h3>
          <p class="shape-tile__caption">Rounded sample, second arrangement.</p>
        </div>
      </div>
    </section>
  </main>
</body>
</html>

Aggiungi il foglio di stile completo

Crea un altro file di testo semplice, chiamato styles.css, nella stessa cartella. Verifica che il nome effettivo del file sia styles.css e non styles.css.txt. Incolla questo intero foglio di stile:

/* Page and host styles */
.demo {
  margin: 0 auto;
  padding: 24px;
  max-width: 960px;
  font-family: system-ui, sans-serif;
  background: #f1f3f5;
  color: #243047;
}
.demo__regions {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.workbench,
.shelf {
  box-sizing: border-box;
  padding: 16px;
  max-width: 100%;
  border: 1px dashed #6b778a;
}
.workbench { width: 480px; }
.shelf { width: 256px; }
.workbench__preview { margin-top: 24px; }
.shelf__preview { margin-top: 12px; }

/* Independent component styles */
.shape-tile {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 1px solid #718096;
  border-radius: 12px;
  background: #fff;
  color: #243047;
  font: 16px/1.5 system-ui, sans-serif;
}
.shape-tile__shape {
  flex: 0 0 48px;
  height: 48px;
  border-radius: 16px 24px 12px 24px;
  background: #536dbe;
}
.shape-tile__content {
  flex: 1 1 160px;
  min-width: 0;
  overflow-wrap: anywhere;
}
.shape-tile__label {
  margin: 0;
  font-size: 18px;
  line-height: 1.3;
}
.shape-tile__caption { margin: 6px 0 0; }

Apri index.html in Safari o in un altro browser desktop. Il confronto previsto mostra un banco di lavoro più ampio e uno scaffale più stretto. Le schede condividono gli stili del componente; lo spazio disponibile determina se la forma e il testo stanno affiancati o vanno a capo.

Qui il contratto delle risorse è importante: rel="stylesheet" stabilisce una risorsa di foglio di stile esterno e href="styles.css" identifica il file necessario al documento. Aggiungere una classe BEM non crea questo collegamento alla risorsa. Tieni insieme i due file quando sposti l’esercizio. Lo standard HTML definisce questa relazione con il foglio di stile. Standard HTML: tipo di link “stylesheet”

Come capire se l’estrazione è riuscita?

Usa il confronto come esercizio diagnostico. I risultati attesi qui sotto derivano dal codice fornito; sono verifiche da eseguire nel browser, non risultati di test riportati.

  1. Verifica la configurazione di base. Entrambe le schede dovrebbero avere uno sfondo bianco, una forma blu arrotondata, un’etichetta e una didascalia. Se tutto appare senza stile, controlla il nome del file CSS e il relativo link prima di valutare il confine del componente.
  2. Rimuovi una classe di posizionamento. Elimina workbench__preview dalla prima scheda, salva e ricarica. Il margine superiore dovrebbe cambiare, mentre l’aspetto interno dovrebbe rimanere intatto.
  3. Rimuovi una classe del contenitore. Rimuovi temporaneamente workbench dalla sezione che contiene la scheda. La cornice del contenitore e la larghezza fissa dovrebbero scomparire, mentre la scheda dovrebbe mantenere gli stili del componente.
  4. Modifica il componente condiviso. Cambia il raggio del bordo in .shape-tile. Entrambe le istanze dovrebbero cambiare senza modificare i selettori dei contenitori.
  5. Metti alla prova il contenuto. Sostituisci una didascalia con una frase sintetica più lunga e restringi la finestra del browser. Verifica il ritorno a capo e che tutto il testo resti visibile.

Interpreta i problemi in base alle responsabilità. Se manca un bordo dopo aver rimosso la classe del contenitore, uno stile del componente potrebbe trovarsi ancora nel selettore del contenitore. Una spaziatura circostante inattesa indica che le regole di posizionamento sono da rivedere. Le differenze nel testo possono rivelare stili ereditati o selettori globali. Correggi la dipendenza responsabile prima di aggiungere un’altra sovrascrittura.

La denominazione BEM non crea un isolamento degli stili imposto dal browser. L’ereditarietà CSS continua attraverso l’albero del documento: quando la cascata non fornisce un valore per l’elemento, le proprietà ereditate assumono i valori del padre. Questo è definito nella specifica CSS Cascading and Inheritance e illustrato da MDN. CSS Cascading and Inheritance Module Level 5, sezione 7.2, Ereditarietà

L’esempio imposta intenzionalmente il font e il colore del testo alla radice della scheda. In una pagina reale, potrebbe essere preferibile ereditare la tipografia del sito. Considerala una dipendenza. Indipendenza significa che l’ambiente richiesto è comprensibile e portabile; non significa dover riprodurre ogni impostazione predefinita del browser in ciascun componente.

Quando è meglio mantenere l’elemento?

Mantieni l’elemento candidato quando il suo significato e la sua implementazione restano specifici del padre. Un contenitore di allineamento usato solo nel banco di lavoro può avere molti discendenti senza bisogno di un’identità pubblica separata. Appiattisci i nomi BEM e migliora l’organizzazione prima di introdurre un nuovo blocco.

Al contrario, anche un componente usato una sola volta può meritare l’estrazione quando la sua responsabilità interna è sostanziale e il confine delle dipendenze è chiaro. Considera il riuso un elemento a favore, non un requisito numerico. In questo esercizio, la seconda collocazione rende più facile esaminare il confine, ma non stabilisce una regola universale che imponga due utilizzi.

Riconsidera anche un’estrazione che accumula varianti specifiche dei contenitori. Nomi come shape-tile--inside-workbench suggeriscono che il posizionamento stia diventando parte dell’interfaccia del componente. Chiediti prima se la differenza appartiene a workbench__preview. Riserva una variante del componente a una differenza che puoi spiegare nei termini propri del componente.

Il moderno scoping CSS cambia la decisione?

La regola @scope può limitare gli ambiti in cui corrispondono i selettori racchiusi, aiutando a gestire i selettori all’interno di un sottoalbero del documento. Attualmente MDN la contrassegna come Baseline 2026, disponibile nelle versioni correnti dei browser da marzo 2026, pur precisando che i dispositivi o browser meno recenti potrebbero non supportarla. Non dare per scontato che sia supportata da tutte le installazioni Mac. Regola CSS at-rule @scope

L’esercizio fornito usa selettori di classe ordinari e non richiede @scope. Se devi supportare browser senza scoping, mantieni gli stili essenziali del componente in queste regole. Lo scoping può aiutarti a esprimere il confine, ma per decidere chi ne è responsabile serve comunque un resoconto chiaro dello scopo, delle dipendenze e del posizionamento del componente.

Estrai l’elemento complesso quando puoi spostare insieme il suo scopo e la sua implementazione interna, lasciare il layout circostante al contenitore e dimostrare il risultato in un altro contesto. Se queste responsabilità restano intrecciate, mantieni l’elemento finché non le hai chiarite; un nome di classe più breve da solo non completa il refactoring.

Fonti