Espaciado de nombres / alcance en CSS

Question

Quiero aplicar las reglas en un archivo CSS a un determinado div / clase, por lo que, por ejemplo, el contenido de events.css solo se aplica al contenido de una clase llamada .events y no está fuera de este alcance sin la necesidad para agregar los eventos de clase al comienzo de cada regla CSS.

Creo que esto no es posible, pero nunca se sabe.

Si no, estoy pensando en lograr el mismo efecto al prefijar los eventos a las reglas CSS después de que se hayan cargado / editado. Estoy pensando que esto debería ser bastante libre de problemas, pero ¿alguien previó algún problema?

Answer 1

  

Estoy pensando que esto no es posible

De hecho. A menos que ponga el contenido en cuestión en un iframe. Luego obtienes un documento completamente separado para darle un estilo diferente.

  

Estoy pensando en lograr el mismo efecto al prefijar los eventos a las reglas CSS después de que se hayan cargado / editado. Estoy pensando que esto debería ser bastante libre de problemas, pero ¿alguien previó algún problema?

¿De manera automatizada? Debería poder analizar la entrada CSS para determinar dónde estaban los comienzos de los selectores.

Esto no es tan trivial como podría pensar hacer correctamente:

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

es un ejemplo de CSS difícil de analizar. .eggs , .bacon y .potato comienzan los selectores y querrían un prefijo .events . .sausage y .beans no lo son.

Answer 2

  

Si no, estoy pensando en lograr el   mismo efecto al prefijar los eventos.   a las reglas CSS después de que hayan sido   subido / editado Estoy pensando esto   debería estar bastante libre de problemas, pero   ¿Alguien ve algún problema?

Esa es la única forma de hacerlo y debería estar bien.

Answer 3

Es más seguro desde el punto de vista del mantenimiento incluir simplemente ".event" en tus reglas CSS. Varios meses más adelante, es posible que haya olvidado los trucos que jugó aquí para ahorrar un poco de escritura.

Answer 4

En resumen, la única forma es prefijar cada regla con .events .

Pero evitaría hacerlo automáticamente, porque es fácil cometer errores, como agregar .events a una regla manualmente, lo que lo duplicaría. Y si desea compartir algunos estilos entre páginas, como .events.special y .aboutus.special , deberá colocarlos en otro lugar.

En general, es mejor usar una hoja de estilo en lugar de una por sección, por lo que el usuario la almacenará en caché cuando vaya a las páginas siguientes. (Puede minimizarlo y comprimirlo en el entorno de producción para reducir el tiempo de descarga inicial).

Answer 5

Agregaría la clase '.events' a los selectores. Existe el riesgo de error humano al hacer esto como un proceso manual. Aquí hay una manera de automatizando parcialmente el proceso de agregar un selector a todas las clases CSS .

Alternativamente, podría usar este prefijo automático , pero no parece manejar espacios entre sus selectores bien.