CSS中的命名空间/范围

Question

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

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

如果不是，我想通过在上传/编辑后将.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

从维护的角度来看，简单地包括“.event”更安全。在你的CSS规则中。几个月后，你可能已经忘记了你在这里玩的技巧，以节省一点点打字。

Answer 4

简而言之，唯一的方法是使用 .events 为每个规则添加前缀。

但我会避免自动执行此操作，因为它很容易出错，比如手动将 .events 添加到规则中，这会使其加倍。如果你想在页面之间共享一些样式，比如 .events.special 和 .aboutus.special ，那么你需要将它们放在其他地方。

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

Answer 5

我会将类'.events'添加到选择器中。作为手动过程，存在人为错误的风险。这是一种部分自动化向所有CSS类添加选择器的过程的方法。

或者您可以使用此自动添加前缀，但它似乎无法处理你的选择者很好。