Per quanto ne so esistono due tipi di namespace CSS:
Prefisso uno:
.myapp-alert {...}
e prima lezione:
.myapp .alert {...}
Quale è preferibile? Uno ha benefici rispetto all'altro? Ce ne sono altri?
Non ci sono spazi dei nomi in CSS. Tutto quello che fai in CSS finisce in ambito globale. Questo è in base alla progettazione.
Questo porta a due problemi:
Che cosa succede alle app che usano la mia libreria se, nella libreria, introduco un determinato stile?
Che cosa succede ad altre parti della mia app 100M-LOC se introduco un determinato stile nella parte su cui sto lavorando?
Queste sono due situazioni distinte, che possono essere gestite con due tecniche distinte che hai descritto nella tua domanda.
I prefissi funzionano bene per librerie e framework. Se un framework ha un'icona di avviso, questa icona può apparire in qualsiasi punto della pagina. Pertanto, non puoi semplicemente adattare lo stile a un particolare elemento (tramite selettore classe / id). Questo porta, in effetti, ai selettori come:
.my-awesome-framework-icons-alert { ... }
La scelta del prefisso è, comunque, importante per evitare collisioni. Librerie e framework popolari possono utilizzare piccoli prefissi, sapendo che i siti Web che li utilizzano si adatteranno. Ad esempio, un sito Web che utilizza AngularJS probabilmente non utilizzerà il prefisso ng- per i suoi elementi personalizzati. Piccole biblioteche, d'altra parte, sarebbe meglio usare nomi più esoterici se vogliono essere facilmente integrati nei progetti esistenti.
Containers , d'altra parte, funzionano bene per i componenti dell'app. Non voglio che tutti gli stili sulla mia pagina Informazioni su siano preceduti da about-page- . Preferirei creare un elemento <div id="about"> e usarlo come ambito per gli stili che sono usati solo sulla pagina Informazioni su .
Usando i preprocessori CSS come LESS, tale codice evita gran parte della duplicazione rispetto ai prefissi. Semplicemente faccio:
#about {
.contact { ... }
.map { ... }
...
}
e lascia che il preprocessore duplichi #about per ogni stile pertinente.
Leggi altre domande sui tag css