BEM e convenzioni di naming CSS, con un generatore di classi | We.Inc
Come BEM dà nome a blocchi, elementi e modificatori, con un builder che controlla i nomi delle tue classi. Confronta BEM con utility class, CSS Modules e @scope.
BEM e convenzioni di naming CSS
BEM sta per Block, Element, Modifier. Un blocco è un componente autonomo come .card, un elemento è una parte che ha senso solo al suo interno, scritta .card__title con due underscore, e un modificatore è una variante scritta .card--featured con due trattini. I modificatori si aggiungono accanto alla classe base, mai al suo posto.
BEM in una tabella
Parte
Schema
Esempio
Blocco
.search-form
Elemento
block__element
.search-form__input
Modificatore di blocco
block--modifier
.search-form--compact
Modificatore di elemento
block__element--modifier
.search-form__button--disabled
Modificatore chiave e valore
block--key-value
.search-form--theme-dark
Il naming è il punto in cui i progetti CSS restano ordinati oppure si trasformano lentamente in una pila di override. Questa pagina spiega le regole BEM tratte dal sito ufficiale di BEM, controlla i nomi delle tue classi mentre scrivi e confronta BEM con gli altri modi in cui oggi i team evitano che gli stili entrino in conflitto.
Scrivi nel builder il nome di un blocco, poi facoltativamente un elemento e un modificatore.
Leggi i nomi delle classi generati e l'HTML che li usa. Compaiono avvisi quando un nome viola una regola BEM.
Copia lo scheletro HTML e CSS nel tuo componente.
Seleziona solo con la singola classe. .card .card__title aggiunge la specificità che BEM è pensato per evitare.
Non concatenare mai elementi come .card__body__title. Ogni elemento appartiene direttamente al blocco, per quanto in profondità si trovi nell'HTML.
Tieni la classe base accanto a un modificatore: class="btn btn--large", non class="btn--large" da sola.
Dai nomi alle cose in base a cosa sono, non a come appaiono. .alert--error sopravvive a un redesign; .alert--red no.
Scegli una sola convenzione per progetto e mettila per iscritto. Un misto di stili è più difficile da leggere di uno qualsiasi preso da solo.
Domande frequenti
Cosa significa BEM?
Block, Element, Modifier. È un metodo di naming per le classi CSS che limita ogni selettore a una sola classe, così la specificità resta piatta e dal nome di una classe capisci a quale componente appartiene.
Perché BEM usa doppi underscore e doppi trattini?
I trattini singoli sono già usati dentro i nomi, come in search-form. Raddoppiare i separatori rende inequivocabile il confine tra blocco, elemento e modificatore, così .search-form__submit-button si legge come un blocco e un elemento.
Vale ancora la pena usare BEM con Tailwind o CSS Modules?
Con le utility class scrivi raramente nomi di classe per i componenti, quindi BEM conta meno. Con CSS Modules è lo strumento di build a isolare i nomi per te, e sono consigliati nomi brevi in camelCase. BEM resta un'ottima scelta per CSS puro, Sass, temi WordPress e design system condivisi tra framework.
Come do il nome a un elemento dentro un elemento?
Collegalo al blocco, non all'elemento genitore. Un titolo dentro il corpo di una card è .card__title, anche quando l'HTML lo annida dentro .card__body. Se la parte annidata è riutilizzabile da sola, rendila invece un nuovo blocco.
Il problema che risolvono le convenzioni di naming
Ogni classe CSS vive in un unico namespace globale. Due sviluppatori che scrivono .title in file diversi finiranno per applicare stili ai titoli l'uno dell'altro, e la soluzione abituale, un selettore più lungo, avvia una corsa agli armamenti della specificità.
Una convenzione dà un proprietario a ogni classe. Quando .pricing-card__price si comporta male sai quale componente aprire, e puoi eliminare il componente sapendo che le sue classi non sono usate altrove.
Quando i blocchi contengono blocchi
Un blocco può stare dentro un altro blocco. Un pulsante in una card resta .btn, e se la card deve posizionarlo, lo stesso elemento può avere entrambe le classi: class="btn card__action".
Questo mix mantiene riutilizzabili gli stili propri del pulsante, mentre la card controlla solo il layout, come margine o allineamento, tramite la sua classe di elemento.
Lo scoping nativo del CSS sta recuperando terreno
@scope ti permette di limitare le regole a un sottoalbero, per esempio tutto ciò che sta dentro .card ma non dentro un .card__media annidato. È diventato Baseline come disponibile da poco nel 2026, quindi controlla i browser del tuo pubblico prima di affidarti solo a lui.
I cascade layer risolvono un problema simile: ti permettono di ordinare per priorità interi gruppi di stili, così un reset o un tema di terze parti non supera mai i tuoi componenti, per quanto specifici siano i suoi selettori.
BEM a confronto con altri approcci
Modi per evitare conflitti tra nomi di classe
Approccio
Esempio
Chi mantiene i nomi univoci
Ideale per
BEM
.card__title--large
Tu, per convenzione
CSS puro, Sass, temi CMS
Utility class (Tailwind)
text-lg font-semibold
Non servono nomi di componente
App costruite a componenti
CSS Modules
styles.cardTitle
Lo strumento di build riscrive i nomi
React, Vue e simili con un bundler
@scope
@scope (.card) { h2 {} }
Il browser limita le regole
Browser recenti, markup leggero
Un componente BEM completo
Blocco card con elementi e modificatori
Ogni selettore è una sola classe. Il modificatore featured cambia il bordo e permette a un elemento di reagire tramite il modificatore del blocco.
Errori comuni con BEM
Sbagliato e giusto
Sbagliato
Giusto
Perché
.card__body__title
.card__title
Gli elementi appartengono al blocco, non ad altri elementi
class="card--featured"
class="card card--featured"
Un modificatore ha bisogno della sua classe base
.card .card__title
.card__title
L'annidamento extra aggiunge specificità
div.card__title
.card__title
I selettori BEM usano solo nomi di classe
.card--blue
.card--primary
Dai un nome al significato, non al colore
Generatore di nomi di classe BEM
Scrivi un blocco, un elemento e un modificatore per ottenere nomi di classe, HTML e CSS corrispondenti, con avvisi quando un nome viola una regola.
Blocco
Elemento (facoltativo)
Modificatore (facoltativo)
Blocco
Elemento
Modificatore
{label}: non inserire tu __ o --; i separatori li aggiunge il builder.
{label}: usa lettere latine minuscole, cifre e trattini singoli.
Gli elementi non possono contenere altri elementi.