CSS: l'importanza dei prefissi nei selettori di classe e di ID

Short link

I selettori di ID e di classe esistono fin dall'inizio della storia dei CSS. Sono i selettori più usati in assoluto ma nonostante questo la buona pratica di utilizzare prefissi coerenti stenta ancora a prendere piede.

Consideriamo questo codice CSS, diviso in due sezioni:


/* Senza prefisso */

.danger { ... }
.info { ... }
.success { ... }

/* Con prefisso */

.my-danger { ... }
.my-info { ... }
.my-success { ... }

Le classi con prefisso appaiono raggruppate sotto lo stesso comune namespace. Ma i vantaggi sono ancora più evidenti se pensiamo alle possibilità offerte dai selettori CSS3:


html.debug-mode *[class^="my-"] {
	outline: 1px solid red;
}

In pratica ora possiamo aggiungere stili collettivi a tutti gli elementi che condividono lo stesso prefisso e questo si rivela molto utile in svariati contesti. Non dobbiamo più elencare tutti i selettori, ma possiamo indirizzare direttamente i nostri stili.