← Blog · 14 aprile 2026 · Team ConvertCaseHQ · 7 min di lettura

Convenzioni di nomi in CSS: kebab-case, BEM e oltre

La maggior parte dei nomi di classe CSS si scrive in kebab-case minuscolo (.site-header, .price-tag) perché è così che il CSS chiama le sue cose: background-color, font-size, flex-direction. BEM ci costruisce sopra una struttura fissa, block__element--modifier, così una classe come card__title--large ti dice a quale componente appartiene, quale parte del componente è e quale variante sta mostrando.

Di seguito: cosa distingue tra maiuscole e minuscole nel CSS e cosa no, perché il kebab-case è diventato lo standard, come si leggono davvero le regole di denominazione di BEM e quando un altro approccio rende BEM superfluo.

Cosa distingue tra maiuscole e minuscole nel CSS, e cosa no

La sintassi del CSS in sé non distingue tra maiuscole e minuscole nell'intervallo ASCII, quindi COLOR: RED funziona esattamente come color: red. Tre cose funzionano diversamente:

• I nomi delle classi distinguono tra maiuscole e minuscole. .Card non corrisponde a class="card". L'unica eccezione è una pagina in modalità quirks, dove i browser confrontano i nomi delle classi senza distinguere maiuscole e minuscole: un motivo in più per iniziare ogni pagina con <!DOCTYPE html>.
• Le proprietà personalizzate distinguono tra maiuscole e minuscole. --brand-color e --Brand-Color sono due variabili diverse.
• I nomi di elementi e attributi HTML no. In un documento HTML, DIV e div selezionano gli stessi elementi. In XML sarebbero diversi.

Il modo più semplice per non pensarci mai più è scrivere in minuscolo tutti i nomi delle classi e tutte le proprietà personalizzate. Per come trattano le maiuscole gli altri linguaggi e i file system, vedi il nostro confronto sulla distinzione tra maiuscole e minuscole.

Perché il kebab-case ha vinto per i nomi delle classi CSS

Niente nel CSS impone il kebab-case ai nomi delle classi. .cardTitle e .card_title sono entrambi validi. I trattini hanno senso perché tutto ciò che circonda un nome di classe li usa già: i nomi delle proprietà, valori come space-between e attributi HTML come aria-label e data-user-id. Una classe in camelCase in un foglio di stile pieno di trattini sembra un refuso.

È in JavaScript che il kebab-case diventa scomodo, perché i trattini non sono ammessi negli identificatori. Il browser risolve da sé i suoi casi: data-user-id si legge come element.dataset.userId, e background-color diventa element.style.backgroundColor. I nomi delle classi di solito restano stringhe (classList.add("is-open")), quindi per loro il problema non si pone.

L'eccezione sono i CSS Modules. Un CSS Module esporta i nomi delle sue classi verso JavaScript come oggetto, quindi .card-title va scritto styles["card-title"], mentre .cardTitle diventa il più pulito styles.cardTitle. È l'unica configurazione in cui passeremmo i nomi delle classi al camelCase.

La nomenclatura BEM: block, element, modifier

BEM (Block, Element, Modifier) nasce in Yandex. La pagina sulla storia della metodologia fa risalire il lavoro al 2005, indica nel rilascio del framework Lego 2.0 di Yandex, a marzo 2009, l'inizio di BEM e colloca il passaggio all'open source nel 2010. Le regole di denominazione sono poche:

• Block (blocco): un componente autonomo che ha senso da solo, come .card, .search-form o .menu.
• Element (elemento): una parte di un blocco che non ha significato al di fuori di esso; il nome è blocco, due trattini bassi, elemento: .card__title, .menu__item.
• Modifier (modificatore): un indicatore che cambia aspetto, comportamento o stato; il nome è blocco o elemento, due trattini, modificatore: .card--featured, .card__button--disabled. Un modificatore può anche essere una coppia chiave-valore: .form--theme-xmas.

Le parole all'interno di ciascuna parte sono separate da un solo trattino, come in .search-form__submit-button. Ecco un componente completo:

<article class="card card--featured">
  <h2 class="card__title">Spring sale</h2>
  <p class="card__body">Everything 20% off this week.</p>
  <a class="card__button card__button--disabled" href="/sale">Shop now</a>
</article>

.card { border: 1px solid #ddd; padding: 1rem; }
.card--featured { border-color: gold; }
.card__title { font-size: 1.25rem; }
.card__button--disabled { opacity: 0.5; pointer-events: none; }

BEM classico e stile a due trattini

Se leggi il sito ufficiale della metodologia, bem.info, i modificatori hanno un aspetto diverso. Lo schema classico separa i modificatori con un solo trattino basso: menu_hidden, menu__item_visible, menu__item_type_radio. La versione con -- vi compare come alternativa, il cosiddetto “Two Dashes style”, ed è quella documentata da getbem.com. Sono entrambe BEM a tutti gli effetti; basta non mescolarle nella stessa codebase. bem.info segnala anche un piccolo inconveniente dei trattini: un doppio trattino dentro un commento HTML può non superare la validazione.

Le regole BEM su cui è facile sbagliare

1. Niente elementi di elementi. Un titolo dentro l'intestazione di una card resta card__title, non card__header__title. Nell'HTML puoi annidare gli elementi quanto vuoi; i nomi restano piatti. Il ragionamento di bem.info: con i nomi concatenati non puoi spostare, aggiungere o rimuovere un elemento senza modificare il codice esistente.
2. I modificatori non stanno mai da soli. Scrivi class="button button--primary", non class="button--primary". Il modificatore si aggiunge e basta alla classe di base.
3. Usa selettori a classe singola. .card__title, non .card .card__title o h2.card__title. L'eccezione ammessa è un modificatore di blocco che cambia i suoi elementi: .card--featured .card__title.
4. Dai ai modificatori nomi legati allo scopo. Questa è una nostra opinione più che una regola BEM: --featured o --error sopravvivono a un restyling, mentre --yellow diventa una bugia il giorno in cui cambia il colore del brand.
5. Tieni gli agganci per JavaScript fuori dalle classi di stile. Anche questa è una nostra opinione: negli script seleziona gli elementi con un attributo data come data-action="close" invece che con .card__button, così rinominare una classe per motivi di stile non può rompere il comportamento.

Rinominare un blocco in un secondo momento è quasi solo questione di cerca e sostituisci. Incolla un template nel nostro strumento Trova e sostituisci, attiva la modalità regex e sostituisci card(__|--) con product-card$1: tutte le classi di elementi e modificatori passano al nuovo nome del blocco, e il numero di corrispondenze ti dice quante ne sono cambiate. Rinomina a parte la classe card da sola, così non prendi dentro parole che non c'entrano.

Scrivere BEM con Sass e con il nesting nativo del CSS

Il selettore genitore di Sass può aggiungere un suffisso al selettore esterno, e la sua documentazione usa proprio BEM come esempio. Il nesting nativo del CSS non può farlo, e MDN lo dice esplicitamente: un &__title annidato viene letto come selettore di tipo, quindi non produce .card__title.

// Sass: works
.card {
  &__title { font-size: 1.25rem; }    // compiles to .card__title
  &--featured { border-color: gold; } // compiles to .card--featured
}

/* Native CSS nesting: write the full class names */
.card {
  border: 1px solid #ddd;
  &.card--featured { border-color: gold; } /* .card.card--featured */
}
.card__title { font-size: 1.25rem; }

Oltre BEM: quando non ti serve

BEM esiste per evitare che i nomi delle classi entrino in collisione e per rendere visibile la struttura in un foglio di stile globale. Se il problema delle collisioni lo risolve qualcos'altro, i suoi nomi lunghi rendono meno:

• I CSS Modules rendono locali i nomi delle classi per impostazione predefinita, quindi un semplice .title in un componente non può scontrarsi con .title in un altro.
• Il CSS utility-first, come Tailwind, sostituisce in gran parte i nomi di classe personalizzati con utility predefinite come font-bold, quindi la questione dei nomi si sposta nei componenti.
• I siti piccoli, con una manciata di componenti, spesso se la cavano benissimo con il semplice kebab-case e un prefisso per ogni componente.

Anche in questi casi, il kebab-case resta la scelta sicura per qualsiasi nome di classe tu scriva.

Regole pratiche

• Sempre kebab-case minuscolo per i nomi di classe e le proprietà personalizzate.
• BEM quando molte persone condividono un unico foglio di stile globale: block__element--modifier, nomi di elementi piatti, modificatori accanto alla classe di base.
• Nomi di classe in camelCase solo quando uno strumento come i CSS Modules li espone a JavaScript.

Devi trasformare il nome di un componente in una classe? Scrivi “Product Card” nel nostro convertitore di maiuscole/minuscole e il pulsante kebab-case ti restituisce product-card. Per le convenzioni di tutti gli altri livelli di un progetto, dalle variabili d'ambiente agli URL, vedi il nostro prontuario degli stili di nomi per sviluppatori.