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

Question

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

一个解决方案是进入并手动重命名一个库或另一个库中的类，但这对我来说似乎很笨拙，以防将来维护的任何人试图使用原始第三方库的干净版本，以及其他问题。此外，冲突的数量尚不清楚，但被认为很大。由于这些原因，命名空间不太可行。

我个人的解决方案是为这个项目滚动我自己的CSS，并正确命名它。但听起来客户拒绝允许这一点，并要求使用两个CSS库，因为他们不想分享这些库。

由于我们无法控制任何一个库，是否有任何其他技巧可以将HTML元素与一个库或另一个库隔离？例如，有没有办法告诉元素接受给定类的CSS样式，但只能从特定的.css文件中接受？我在这里编写假的语法，但是像：

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

Answer 1

您的担忧看起来不错。

请在下面找到我的调查结果。

  

有没有办法告诉元素接受给定的CSS样式   class，但仅​​限于特定的.css文件

     

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

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

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

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

你显然会有一个这个 div 的包装选择器，如下所示

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

现在，由于链接CSS的顺序， custom.css 中 .active 的样式将被置于优先级