css – 添加！对于没有javascript的小部件的所有样式都很重要

我正在构建一个将在客户端站点上显示的小部件.我们不能使用iFrame,因此我不得不使用详尽的CSS重置(https:// github.com/premasagar/cleanslate)来避免干扰他们的样式.要使用该解决方案,我需要为我的所有样式添加！important,因为它们有很多并且我希望保持这些代码易于维护,我正在寻找更动态的解决方案.

我可以通过javascript向样式表添加！important,但这对于生产环境来说并不理想.我正在使用CodeKit和LESS,并想知道这些中的任何一个是否能够帮助我轻松添加！对于生成CSS文件时所有样式都很重要.

混入？
CodeKit配置？

解决方法

更新：是的,LESS可以提供​​帮助

除了在最极端的情况下,我讨厌使用！重要.当他们应该使用scalpal来完成这项工作时,大多数人会像电锯一样使用它.尽管如此,我理解像您这样的小部件开发人员面临的问题,并且您选择使用https://github.com/premasagar/cleanslate会让您无法选择.

Marc’s answer注意到LESS的一个很好的特点,但是他没有证明这对这件事有什么帮助.

如果将整个LESS代码包装在命名空间的mixin中,则此功能可以完全满足需要.因此,假设您的小部件代码看起来像这样(您提到您已经在为小部件使用某种类型的类)：

.yourWidgetClass div > p {
  prop: something;
  &:hover {
    prop: some-hover-style;
  }
}

.yourWidgetClass .someClass {
  prop: something;
}

然后你可以这样做(将所有小部件代码包装在#makeImportant()中,然后使用marc的答案中提到的！important特性调用mixin)：

#makeImportant() {
    .yourWidgetClass div > p {
      prop: something;
      &:hover {
        prop: some-hover-style;
      }
    }

    .yourWidgetClass .someClass {
      prop: something;
    }
}

& {
    #makeImportant() !important;
}

这会产生以下CSS输出：

.yourWidgetClass div > p {
  prop: something !important;
}
.yourWidgetClass div > p:hover {
  prop: some-hover-style !important;
}
.yourWidgetClass .someClass {
  prop: something !important;
}

对于我手动密集的原始(已接受)答案,请参阅编辑历史记录.

原文地址：https://www.jb51.cc/css/215123.html