CSS: Bootstrap e la mancanza di namespace

Bootstrap ha un grave punto debole: non ha un namespace.

I namespace nei CSS possono essere creati usando un prefisso nei selettori di classe e ID. Immaginiamo questa situazione:

.column,
.pull-quote {
	float: left;
}

E nella sezione responsive:

@media screen and (max-width: 640px) {
	.column,
	.pull-quote {
		float: none;
	}
}

Siamo di fatto costretti a duplicare il codice per sovrascrivere gli stili. Se usassimo invece un namespace, avremmo:

.my-column,
.my-pull-quote {
	float: left;
}

E nella sezione responsive:

@media screen and (max-width: 640px) {
	[class^="my-"] {
		float: none;
	}
}

Rispetto al selettore universale questa soluzione è più specifica e ci permette di evitare di duplicare il codice.