Jun 17, 2025
Scrivere codice CSS può diventare rapidamente un incubo di selettori annidati, sovrascritture inaspettate e dipendenze nascoste, specialmente in progetti di grandi dimensioni o con più sviluppatori. È qui che entra in gioco il metodo BEM (Block, Element, Modifier), una metodologia di denominazione che promette di portare ordine, modularità e scalabilità al tuo CSS.
Se ti sei mai ritrovato a lottare con la specificità CSS o a chiederti "dove cavolo è definito questo stile?", BEM potrebbe essere la soluzione che stavi cercando.
Cos'è il Metodo BEM?
BEM è un approccio basato su componenti per lo sviluppo web. Il suo nome è l'acronimo di tre concetti fondamentali che rappresentano i blocchi di costruzione di un'interfaccia utente:
Block (Blocco): Un blocco è un componente autonomo, indipendente e riutilizzabile dell'interfaccia. Può essere qualsiasi cosa, da un pulsante a un'intestazione, un menu di navigazione o un intero modulo. Il suo nome dovrebbe essere significativo e rappresentare la sua funzione (es. button, header, form).
Element (Elemento): Un elemento è una parte di un blocco che non ha senso di esistere al di fuori del suo blocco genitore. È strettamente legato al blocco e contribuisce al suo funzionamento. I nomi degli elementi sono separati dal nome del blocco da due underscore (__). Ad esempio, un blocco card potrebbe avere elementi come card__image, card__title, card__text.
Modifier (Modificatore): Un modificatore è una flag o una proprietà che cambia l'aspetto o il comportamento di un blocco o di un elemento. È usato per definire diverse varianti di un blocco o elemento senza riscrivere tutto il codice. I nomi dei modificatori sono separati dal nome del blocco o dell'elemento da due trattini (--). Ad esempio, button--primary, button--disabled, card__title--large.
Perché Usare BEM?
L'adozione del metodo BEM porta numerosi vantaggi alla tua pipeline di sviluppo CSS:
Modularità e Riutilizzo
BEM incoraggia a pensare in termini di componenti indipendenti. Ogni blocco è autonomo e può essere riutilizzato in diverse parti del sito senza effetti collaterali indesiderati. Questo riduce la quantità di codice duplicato e facilita lo sviluppo di interfacce complesse.
Specificità CSS Piatta
Uno dei maggiori vantaggi di BEM è che ti permette di mantenere una specificità CSS molto bassa, usando principalmente solo selettori di classe. Questo significa che non avrai bisogno di sovrascrivere stili con !important o selettori complessi, rendendo il tuo CSS più prevedibile e facile da debuggare.
Leggibilità e Manutenibilità
La convenzione di denominazione di BEM rende immediatamente chiaro lo scopo e la relazione di ogni classe. Guardando card__title--large, capisci subito che è un titolo all'interno di una card e che è una versione "grande". Questo migliora drasticamente la leggibilità del codice, specialmente quando si lavora in team.
Scalabilità
BEM è estremamente scalabile. Man mano che il tuo progetto cresce, l'aggiunta di nuovi componenti o la modifica di quelli esistenti diventa semplice e prevedibile. La natura isolata dei blocchi impedisce che le modifiche in una parte del sito influenzino accidentalmente altre aree.
Collaborazione Semplificata
Quando più sviluppatori lavorano sullo stesso progetto, una convenzione di denominazione chiara come BEM riduce i conflitti e assicura che tutti seguano le stesse linee guida. Questo porta a un codice più coerente e meno errori.
Come Applicare BEM nella Pratica
Vediamo un esempio pratico di come strutturare un componente "card" con BEM.
HTML:
<div class="card">
<img class="card__image" src="image.jpg" alt="Descrizione immagine" />
<div class="card__content">
<h2 class="card__title">Titolo della Card</h2>
<p class="card__text">Questo è il testo di esempio per la card.</p>
<button class="card__button card__button--primary">Leggi di più</button>
</div>
</div>
<div class="card card--featured">
<img class="card__image" src="image-featured.jpg" alt="Immagine in evidenza" />
<div class="card__content">
<h2 class="card__title card__title--large">Card in Evidenza</h2>
<p class="card__text">Questa è una card speciale con un titolo più grande.</p>
<button class="card__button card__button--secondary">Scopri</button>
</div>
</div>
CSS:
/* Blocco: card */
.card {
border: 1px solid #ccc;
border-radius: 8px;
padding: 16px;
margin-bottom: 24px;
display: flex;
flex-direction: column;
}
/* Modificatore per il blocco card */
.card--featured {
background-color: #f0f8ff;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
/* Elemento: image */
.card__image {
max-width: 100%;
height: auto;
border-radius: 4px;
margin-bottom: 12px;
}
/* Elemento: content */
.card__content {
flex-grow: 1;
}
/* Elemento: title */
.card__title {
font-size: 20px;
color: #333;
margin-top: 0;
margin-bottom: 8px;
}
/* Modificatore per l'elemento title */
.card__title--large {
font-size: 28px;
color: #007bff;
}
/* Elemento: text */
.card__text {
font-size: 14px;
line-height: 1.5;
color: #666;
margin-bottom: 16px;
}
/* Elemento: button */
.card__button {
padding: 10px 15px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
/* Modificatore per l'elemento button */
.card__button--primary {
background-color: #007bff;
color: white;
}
.card__button--secondary {
background-color: #6c757d;
color: white;
}
Noterai che ogni selettore CSS è una singola classe e la sua specificità è minima. Questo rende molto più facile prevedere come gli stili verranno applicati e sovrascritti.
Considerazioni Finali
BEM non è l'unico metodo di organizzazione CSS (esistono SMACSS, OOCSS, CSS Modules, ecc.), ma è uno dei più popolari e ampiamente adottati grazie alla sua chiarezza e ai suoi benefici tangibili. Richiede un po' di pratica per abituarsi alla sua convenzione di denominazione, ma l'investimento iniziale si ripaga ampiamente in termini di codice più pulito, più facile da gestire e più scalabile.
Se stai cercando di migliorare la qualità e la manutenibilità del tuo CSS, il metodo BEM è sicuramente un'opzione da esplorare. Hai già provato BEM nei tuoi progetti?
