BEM: denominazione Block Element Modifier
Applichi la metodologia Block-Element-Modifier per creare nomi di classi prevedibili e riutilizzabili.
BEM: denominazione Block Element Modifier è una lezione CSS Academy gratuita su CoddyKit. Questa è la lezione 2 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 CSS Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso CSS Academy include 4 lezioni in totale.
Che cos'è BEM?
BEM (Block–Element–Modifier) è una convenzione di denominazione che crea nomi di classe autoesplicativi. Rende i componenti CSS prevedibili e autodocumentanti.
Blocco
Un Block è un componente dell'interfaccia autonomo e dotato di significato, che può esistere indipendentemente. È la classe radice del componente.
<div class="card">Card block</div>
<nav class="nav">Nav block</nav>
<button class="button">Button block</button>
<form class="search-form">Search form block</form>Elemento
Un Element è un elemento figlio di un blocco che non ha significato al di fuori di esso. Gli elementi usano il doppio carattere di sottolineatura: .block__element.
<div class="card">
<div class="card__image">Image</div>
<div class="card__body">
<h2 class="card__title">Title</h2>
</div>
</div>
<nav class="nav">
<div class="nav__item"><a class="nav__link" href="#">Link</a></div>
</nav>Modificatore
Un Modifier è una variante o uno stato di un blocco o di un elemento. I modificatori usano il doppio trattino: .block--modifier.
<button class="button button--primary">Primary</button>
<button class="button button--large">Large</button>
<div class="card card--featured">Featured Card</div>
<nav class="nav">
<div class="nav__item nav__item--active">Active Item</div>
</nav>Esempio BEM completo
Un componente card con denominazione BEM:
<div class="card card--featured">
<div class="card__image" role="img" aria-label="Card image"></div>
<div class="card__body">
<h2 class="card__title">Title</h2>
<p class="card__text">Content</p>
<a class="button button--primary card__action" href="#">Read More</a>
</div>
</div>Struttura CSS BEM
Il CSS corrispondente per la card BEM:
<div class="card card--featured">
<div class="card__image" role="img" aria-label="Card image"></div>
<div class="card__body">
<h2 class="card__title">Title</h2>
<p class="card__text">Content</p>
<a class="button card__action" href="#">Read More</a>
</div>
</div>Vantaggio della specificità BEM
Le classi BEM sono tutte classi singole (specificità 0,1,0). Nessun selettore è più specifico di un altro, quindi le sovrascritture sono semplici: basta aggiungere la classe modificatrice corretta.
Errori BEM comuni
Eviti questi errori BEM:
- Elementi su più livelli:
.card__body__title— li appiattisca in.card__title - Elementi al di fuori del relativo blocco nell'HTML
- Uso di selettori di elemento come
.nav__link a— aggiunge specificità non necessaria
BEM con proprietà personalizzate CSS
BEM e variabili CSS si combinano naturalmente. Definisca token a livello di blocco che i modificatori possano sovrascrivere:
<button class="button">Default</button>
<button class="button button--danger">Danger</button>Quando non usare BEM
BEM è verboso e non è ideale per le classi utility o per gli stili usati una sola volta. I framework utility-first come Tailwind sostituiscono completamente BEM. Utilizzi BEM per le librerie di componenti personalizzate in cui la denominazione semantica è importante.
BEM nella pratica
Molti design system usano varianti di BEM o schemi di denominazione simili. La sintassi specifica conta meno del principio coerente: blocco → elemento → modificatore, senza annidamenti profondi e con specificità uniforme.
Verifica rapida
In BEM, quale sintassi rappresenta un elemento chiamato "title" all'interno di un blocco "card"?
Riepilogo
BEM usa la denominazione Blocco, Elemento e Modificatore: .block__element--modifier. Tutte le classi sono classi singole, per ottenere una specificità uniforme e paritaria. Gli elementi (__) appartengono al relativo blocco. I modificatori (--) creano varianti. Eviti annidamenti profondi come .card__body__title: li appiattisca in .card__title.
Domande Frequenti
La lezione «BEM: denominazione Block Element Modifier» è gratuita?
Sì — il testo completo di «BEM: denominazione Block Element 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 CSS Academy, passa a CoddyKit PRO. Il corso CSS Academy include 4 lezioni in totale.
Cosa imparerò in «BEM: denominazione Block Element Modifier»?
Applichi la metodologia Block-Element-Modifier per creare nomi di classi prevedibili e riutilizzabili. Eserciti CSS 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 CSS Academy?
Non è richiesta alcuna esperienza precedente. CSS 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 2 di 4.
Quanto tempo richiede la lezione «BEM: denominazione Block Element 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 CSS Academy?
Sì. Ogni lezione CSS 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
- Perché l'architettura CSS è importante
- BEM: denominazione Block Element Modifier
- Organizzazione dei file: pattern ITCSS e 7-1
- Evitare le guerre di specificità