La cascata permette alle regole di stile di combinarsi tra di loro, a patto che tali regole non vadano in conflitto tra di loro, nel qual caso interviene la specificità. Le classi CSS sono il terreno perfetto per sfruttare al meglio tale caratteristica.
La regola principale da seguire è la genericità: una classe CSS dovrebbe poter essere riusata in più di un contesto:
/* Classe generica: tutti gli elementi */
.alignleft {
float: left;
margin: 0 0 0 1em;
}
/* Classe specifica: solo gli elementi img */
img.alignleft {
float: left;
margin: 0 0 0 1em;
}
In questo caso le regole sono identiche (in conflitto), quindi le ultime sovrascriveranno le prime. Possiamo tuttavia evitare questo problema sfruttando la specificità:
/* Classe generica: tutti gli elementi */
.alignleft {
float: left;
margin: 0 0 0 1em;
}
/* Classe specifica: solo gli elementi img */
img.alignleft {
padding: 0.3em;
border: 1px dotted;
}
Ora le immagini con classe alignleft saranno flottate, avranno un margine sinistro impostato, un padding ed un bordo in virtù del fatto che gli stili si sommano in quanto le regole non sono in conflitto tra di loro.
Riassumendo: sfruttando genericità, cascata e specificità possiamo creare classi CSS riusabili ed adatte a diversi contesti d'uso.