CSS中的命名空间/作用域

Question

我想将CSS文件中的规则应用于某个div /类，例如，events.css的内容仅适用于名为.events的类的内容，而不是外部这个范围不需要添加类.events到每个css规则的开始。

虽然我认为这是不可能的 - 但你永远不知道。

如果没有，我想通过在.events上传/编辑之后将.events前缀添加到CSS规则来达到相同的效果。我认为这应该是相当无故障的，但有没有人预见到任何问题？

Answer 1

我想这是不可能的，虽然

确实。除非您将相关内容置于iframe中。然后你会得到一个完全不同的文档。

我想通过在.events上传/编辑后为CSS规则添加前缀来实现相同的效果。我认为这应该是相当无故障的，但有没有人预见到任何问题？

以自动化的方式？您需要能够解析CSS输入以确定选择器的起始位置。

这并不像你想象的做正确的小事：

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

是棘手到解析CSS的例子。 .eggs，.bacon和.potato开始选择器，并希望前缀为.events。 .sausage和.beans不是。

Answer 2

如果不是我想通过在前面的.events 的CSS规则，他们已经实现后的 同样的效果 上传/编辑。我想这 应该是相当无故障的，但 有没有人预防任何问题？

这是唯一的方法来做到这一点，应该没问题。

Answer 3

从维护的角度来看，在您的CSS规则中只包含“.event”会更安全。几个月后，你可能已经忘记了你在这里玩的一些技巧，以节省一些打字的时间。

Answer 4

总之，唯一的方法是用.events前缀每个规则。

但是我会自动避免这样做，因为很容易出错，比如手动添加.events到规则，这会使其加倍。如果你想分享一些页面样式，如.events.special和.aboutus.special那么你需要把它们放在别的地方。

通常最好使用一个样式表，而不是每个节，因此用户在进入后续页面时会将其缓存起来。 （您可以再压缩和gzip它在生产环境，减少初始下载时间。）

Answer 5

我会将类'.events'添加到选择器中。这可能会导致人为错误，因为这是手动过程。这是一种partially automating the process of adding a selector to all CSS classes的方法。

或者，你可以使用这个automatic prefixer，但它似乎并没有很好地处理你的选择器之间的空间。