Spaziatura dei nomi / Scoping nei CSS

Question

Voglio applicare le regole in un file CSS a una certa div / classe quindi, ad esempio, il contenuto di events.css viene applicato solo al contenuto di una classe chiamata .events e non al di fuori di questo ambito senza la necessità per aggiungere la classe .events all'inizio di ogni regola CSS.

Penso che non sia possibile, ma non lo sai mai.

Altrimenti sto pensando di ottenere lo stesso effetto anteponendo gli eventi .event alle regole CSS dopo che sono stati caricati / modificati. Penso che questo dovrebbe essere abbastanza privo di problemi, ma qualcuno prevede problemi?

Answer 1

  

Penso che questo non sia possibile però

In effetti. A meno che non si inserisca il contenuto in questione in un iframe. Quindi ottieni un documento completamente separato con uno stile diverso.

  

Sto pensando di ottenere lo stesso effetto anteponendo gli eventi .event alle regole CSS dopo che sono stati caricati / modificati. Penso che questo dovrebbe essere abbastanza privo di problemi, ma qualcuno prevede problemi?

In modo automatizzato? Dovresti essere in grado di analizzare l'input CSS per determinare dove erano gli inizi dei selettori.

Non è così banale come potresti pensare di fare correttamente:

/* This is my grate CSS
.sausage { color: red; } adds a class rule
/*/ .eggs, .bacon { color: red; }
.potato:before { content: "; }
.beans { content: "; }

è un esempio di CSS complicato da analizzare. .eggs , .bacon e .potato iniziano i selettori e vorrebbero un prefisso .events . .sausage e .beans non lo sono.

Answer 2

  

Altrimenti sto pensando di raggiungere il   stesso effetto prefissando il .events   alle regole CSS dopo che sono state   caricato / modificato. Sto pensando questo   dovrebbe essere abbastanza senza problemi, ma   qualcuno prevede qualche problema?

Questo è l'unico modo per farlo e dovrebbe andare bene.

Answer 3

Dal punto di vista della manutenzione è più sicuro includere semplicemente " .event " nelle tue regole CSS. Diversi mesi dopo, potresti aver dimenticato i trucchi che hai giocato qui per risparmiare un po 'di battitura.

Answer 4

In breve, l'unico modo è aggiungere un prefisso a ciascuna regola con .events .

Ma eviterei di farlo automaticamente, perché è facile commettere errori, come aggiungere .events a una regola manualmente, il che raddoppierebbe. E se volessi condividere alcuni stili tra le pagine, come .events.special e .aboutus.special , dovresti metterli altrove.

In genere è meglio usare un foglio di stile invece di uno per sezione, quindi l'utente lo memorizzerà nella cache quando passa alle pagine successive. (È possibile minimizzare e decomprimerlo nell'ambiente di produzione per ridurre i tempi di download iniziali.)

Answer 5

Aggiungerei la classe '.events' ai selettori. Esiste il rischio di errore umano nel fare questo come un processo manuale. Ecco un modo per automatizzare parzialmente il processo di aggiunta di un selettore a tutte le classi CSS .

In alternativa puoi utilizzare questo prefisso automatico , ma non sembra gestire spazi tra bene i tuoi selettori.