Metodologia BEM: Block, Element e Modifier
Assegnare nomi alle classi CSS secondo il pattern Block__Element--Modifier per creare stili dei componenti autoesplicativi, riutilizzabili e con bassa specificità.
Metodologia BEM: Block, Element e Modifier è una lezione Frontend Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Frontend Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Frontend Academy include 4 lezioni in totale.
Che cos’è BEM?
BEM (Block, Element, Modifier) è una convenzione per denominare le classi CSS che rende gli stili prevedibili, riutilizzabili e privi di conflitti. Codificando la struttura dei componenti nei nomi delle classi, elimina le guerre di specificità e le collisioni accidentali tra gli stili.
Blocchi — componenti autonomi
Un blocco è un componente indipendente e riutilizzabile: card, button, nav. Il nome della classe corrisponde al nome del blocco, scritto in minuscolo con i trattini.
<div class="card">...</div>
<button class="btn">...</button>
<nav class="main-nav">...</nav>Elementi — parti di un blocco
Un elemento è una parte di un blocco che non ha significato autonomo. Utilizzi due underscore: block__element.
<div class="card">
<img class="card__image" src="..." alt="...">
<div class="card__body">
<h2 class="card__title">Title</h2>
<p class="card__description">...</p>
</div>
<footer class="card__footer">
<a class="card__link" href="...">Read more</a>
</footer>
</div>Modificatori — varianti e stati
Un modificatore cambia l’aspetto o il comportamento di un blocco o di un elemento. Utilizzi due trattini: block--modifier oppure block__element--modifier.
<button class="btn">Default</button>
<button class="btn btn--primary">Primary</button>
<button class="btn btn--danger btn--large">Large Danger</button>
<div class="card card--featured">...</div>
<nav class="main-nav main-nav--collapsed">...</nav>Regole CSS di BEM
Le classi BEM hanno una specificità bassa e uniforme (una classe ciascuna). Questo rende gli stili facili da sovrascrivere. Non utilizzi mai ID o selettori di elementi annidati: aumentano la specificità in modo imprevedibile.
/* Good BEM CSS */
.card { /* ... */ }
.card__title { /* ... */ }
.card--featured { /* ... */ }
/* Avoid */
.card h2 { /* targets any h2 in .card — too broad */ }
#featured-card { /* high specificity — hard to override */ }BEM con Sass
Il selettore padre & di Sass rende meno prolissa la scrittura di BEM. Il CSS compilato è identico a quello del BEM tradizionale.
.card {
padding: 16px;
&__title {
font-size: 1.25rem;
font-weight: 600;
}
&__body {
color: var(--color-text-secondary);
}
&--featured {
border: 2px solid var(--color-brand);
}
}Quando creare un nuovo blocco
Crei un nuovo blocco quando il componente può funzionare autonomamente ed essere riutilizzato in contesti diversi. Crei un elemento quando quella parte ha senso solo all’interno di uno specifico blocco.
BEM evita l’annidamento
BEM scoraggia l’annidamento profondo in HTML e CSS. Un elemento all’interno di un altro elemento resta block__element, non block__element__subelement.
<!-- Correct: -->
<div class="card">
<div class="card__meta">
<time class="card__date">Jan 1</time>
</div>
</div>
<!-- Wrong: -->
<div class="card">
<div class="card__meta">
<time class="card__meta__date">Jan 1</time> <!-- 3 levels = wrong -->
</div>
</div>BEM e JavaScript
Utilizzi una classe separata, specifica per JavaScript, come hook comportamentale: prefisso js-. In questo modo separa gli stili dagli script: rinominare una classe BEM non interromperà il comportamento JavaScript.
<button class="btn btn--primary js-submit">Submit</button>
// JS: select by js- class
document.querySelector('.js-submit').addEventListener('click', handleSubmit);Combinare i blocchi BEM
Un elemento può avere più classi di blocco per applicare stili specifici del contesto senza creare accoppiamento tra i blocchi.
<button class="btn btn--primary form__submit">Submit</button>Limitazioni di BEM
I nomi delle classi possono diventare lunghi. BEM funziona al meglio per i team numerosi e i design system in cui è importante mantenere coerenti gli stili globali. Nei framework per componenti (React/Vue) con stili con ambito limitato, i vantaggi del namespace di BEM sono meno essenziali.
Verifica rapida
In BEM, che cosa rappresenta card__title--truncated?
Riepilogo: BEM
Blocco: componente autonomo. Elemento (due underscore __): parte di un blocco. Modificatore (due trattini --): variante o stato. Specificità bassa e uniforme. Eviti i selettori ID e l’annidamento profondo. Utilizzi il prefisso js- per gli hook JavaScript. Sass & rende BEM meno prolisso. È eccellente per i team numerosi e i design system.
Domande Frequenti
La lezione «Metodologia BEM: Block, Element e Modifier» è gratuita?
Sì — il testo completo di «Metodologia BEM: Block, Element e Modifier» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Frontend Academy, passa a CoddyKit PRO. Il corso Frontend Academy include 4 lezioni in totale.
Cosa imparerò in «Metodologia BEM: Block, Element e Modifier»?
Assegnare nomi alle classi CSS secondo il pattern Block__Element--Modifier per creare stili dei componenti autoesplicativi, riutilizzabili e con bassa specificità. Eserciti Frontend Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Frontend Academy?
Non è richiesta alcuna esperienza precedente. Frontend Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.
Quanto tempo richiede la lezione «Metodologia BEM: Block, Element e Modifier»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Frontend Academy?
Sì. Ogni lezione Frontend Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Metodologia BEM: Block, Element e Modifier
- CSS Modules: nomi delle classi con ambito limitato
- CSS-in-JS: Styled-components ed Emotion
- Approccio utility-first di Tailwind CSS