Namespacing / escopo em CSS

Question

Eu quero aplicar as regras em um arquivo CSS para a div certa / aula para, por exemplo, o conteúdo de events.css só é aplicada ao conteúdo de uma classe chamada .Eventos e não fora deste âmbito, sem a necessidade para adicionar os .Eventos classe do início de cada regra css.

Eu estou pensando que isso não é possível - embora. Mas nunca se sabe

Se não estou pensando em alcançar o mesmo efeito prefixando os .Eventos às regras CSS depois de terem sido enviados / editado. Eu estou pensando que esta deve ser bastante livre de problemas, mas será que alguém FORSEE quaisquer problemas?

Answer 1

Eu estou pensando que isso não é possível, porém

De fato. A menos que você colocar o conteúdo em questão em um iframe. Então você começa um documento inteiro em separado ao estilo diferente.

Estou pensando em conseguir o mesmo efeito prefixando os .Eventos às regras CSS depois de terem sido enviados / editado. Eu estou pensando que esta deve ser bastante livre de problemas, mas será que alguém FORSEE quaisquer problemas?

Em uma forma automatizada? Você precisaria ser capaz de analisar a entrada CSS para determinar onde os inícios dos seletores foram.

Isto não é tão trivial como se poderia pensar para fazer corretamente:

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

é um exemplo de CSS complicado-to-análise. .eggs, .bacon e .potato começar seletores e gostaria de ter um prefixo .events. .sausage e .beans não são.

Answer 2

Se não estou pensando em alcançar o mesmo efeito por prefixar os .Eventos às regras CSS depois de terem sido carregado / editada. Eu estou pensando que isso deve ser bastante livre de problemas, mas faz qualquer um FORSEE quaisquer problemas?

Essa é a única maneira de fazê-lo e deve ser fino.

Answer 3

É mais seguro do ponto de vista de manutenção para incluir simplesmente ".event" em suas regras CSS. Vários meses abaixo da estrada, você pode ter esquecido os truques que você jogou aqui para salvar um pouco de digitação.

Answer 4

Em suma, o único caminho é para prefixar cada regra com .events.

Mas eu iria abster-se de fazer isso automaticamente, porque é fácil cometer erros, como a adição de .events a uma regra manualmente, o que dobraria-lo. E se você queria compartilhar alguns estilos em páginas, como .events.special e .aboutus.special então você precisa colocá-los em outro lugar.

Em geral, é melhor usar uma folha de estilo em vez de um por seção, para que o usuário terá que cache quando eles vão para as páginas seguintes. (Você pode apoucar e gzip-lo no ambiente de produção para reduzir o tempo de download inicial.)

Answer 5

Gostaria de adicionar a classe' .Eventos para os seletores. Há o risco de erro humano fazendo isso como um processo manual. Aqui está uma maneira de automatizar parcialmente o processo de adição de um seletor para todos CSS aulas .

Como alternativa, você poderia usar esta automática Prefixer , mas não parecem lidar com espaços entre seus seletores bem.