Css 添加对于没有javascript的小部件，所有样式都很重要

我正在构建一个小部件，它将显示在客户的站点上。我们不能使用iFrame，所以我不得不使用详尽的CSS重置(https://github.com/premasagar/cleanslate)避免干扰他们的风格。要使用该解决方案，我需要添加！这对我所有的风格都很重要，因为它们有很多，而且我想让这些代码易于维护，所以我正在寻找一个更具动态性的解决方案

我可以补充！通过javascript对样式表很重要，但这对于生产环境并不理想。我正在使用CodeKit和LESS，不知道这两个工具能否帮助我轻松添加！生成CSS文件时对所有样式都很重要

混音？ CodeKit配置？

更新：是的，少一点会有帮助 我讨厌使用

！重要信息

除非在最极端的情况下。大多数人在应该用头皮做这项工作时，就像用电锯一样使用它。尽管如此，我理解像您这样的小部件开发人员面临的问题，您选择使用它让您别无选择

注意到LESS的一个良好特性，但他未能证明这在这方面有何帮助

如果您将整个LESS代码包装在一个名称空间的mixin中，那么这个特性正好满足您的需要。因此，假设您的小部件代码如下所示（您提到您已经在为小部件使用某种类型的类）：

.yourWidgetClass div>p{
道具：某物；
&：悬停{
道具：一些悬停式；
}
}
.yourWidgetClass.someClass{
道具：某物；
}

然后您可以这样做（将所有小部件代码包装在

#makeImportant（）

中，然后使用Marc回答中提到的

！important

功能调用该mixin）：

#makeImportant（）{
.yourWidgetClass div>p{
道具：某物；
&：悬停{
道具：一些悬停式；
}
}
.yourWidgetClass.someClass{
道具：某物；
}
}
& {
#使重要；使重要；
}

这将生成以下CSS输出：

.yourWidgetClass div>p{
道具：重要的东西；
}
.yourWidgetClass div>p:悬停{
道具：一些悬停风格！重要；
}
.yourWidgetClass.someClass{
道具：重要的东西；
}

---

对于我的原始（已接受的）答案，手动操作要密集得多，请参见编辑历史。

我发现LESS可以一次将mixin设置的所有属性标记为

！重要信息

当指定

时！重要信息

在混音通话后

  .someMixin() {
    background-color: #fff;
    cursor: pointer;
  }

  .someUsages {
    .someMixin() !important;
  }

结果：

  .someUsages {
    background-color: #fff !important;
    cursor: pointer !important;
  }

---

有关此主题的详细信息，请参阅关于“”的LESS文档.

对于覆盖样式，我建议在标记中添加一个类，然后根据需要使用该类覆盖样式。我已经在用一个类包装我的小部件，并使用它进行样式设置，但这并不能阻止客户端CSS干扰我的样式，如果他们设置了我不负责的内容。也许我没有遵循您的要求说但是如果你使用的是最高级别的css选择器，我看不出他们的样式会如何覆盖你的样式。除非他们在标签上也设置了选择器。您应该能够创建自己的样式表，并使用自己的选择器覆盖所有预先存在的样式。您所说的是正确的。然而，问题在于它压倒了未知。虽然他们的CSS不能更改我明确设置的任何样式，但他们可以添加我没有考虑的样式。（例如，如果他们在上设置了边界，而我没有设置边界来重置，我的都会有边界）@Krisholenbeck:你的逻辑并不完全正确。与类是否在

主体上几乎没有关系
.bodyClass div
不会覆盖
.somelowerrapperclass div
，除非
.bodyClass div
发生在另一个选择器之后（从而通过级联顺序覆盖）。感谢您提供的详细答案。我决定我需要用不同的方式来处理这个问题。。。我们最终使用了iFrame来消除这些麻烦（加上jQuery名称空间等）。