如何解决来自多个第三方库的CSS类名称冲突？

Question

试图帮助一个项目的朋友。由于客户的需求，他们被迫使用两个相互冲突的第三方CSS库。例如，库A定义了一个名为的类.active，库B也定义了一个名为的类.active。您可以看到哪里可能出错。

一种解决方案是进入并手动重命名一个或另一个库中的类，但是这对我来说似乎很笨拙，以防万一将来进行维护的任何人都尝试使用原始第三方库的完整版本等问题。而且，冲突的数量尚不知道，但被认为很大。由于这些原因，命名间隔不太可行。

我个人的解决方案是为该项目投放自己的CSS，并为其适当地命名空间。但这听起来像客户端拒绝这样做，并要求他们使用两个CSS库，而无须他们共享它们的特定原因。

由于我们不受任何一个库的控制，是否还有其他技巧可以将HTML元素与一个或另一个库隔离？例如，是否有一种方法可以告诉元素接受给定类的CSS样式，但只能来自特定的.css文件？我在这里伪造语法，但是类似：

<div class="myStyles.css[active]">styled content</div>

Answer 1

你的关心看起来不错。

请在下面找到我对您的关注的发现。

有没有办法告诉元素接受给定类的 CSS 样式，但只能来自特定的 .css 文件

<div class="myStyles.css[active]">styled content</div>

这在 HTML5/CSS 中是不可能的。

解决此冲突的一种方法是，

将您的custom.css文件与#my-wrapper .active { ... } 的必要样式与第 3 方（按顺序排列）一起包含在内。

显然，您将有一个包装选择器到您的这个div 中，如下所示

<div id="my-wrapper">
  <div class=".active">styled content</div>
</div>

现在，对于风格。活跃在你的custom.css将放在优先由于与CSSS的顺序