CSS无冲突风格

Question

创建CSS样式表的无冲突版本的好方法是什么？假设您有一堆代码，其中的类与Bootstrap的类重叠。

这是否有效：在应用引导样式的祖先元素中添加class="bootstrap"，然后将bootstrap.css更改为rule {}每个.bootstrap rule {}前缀？< / p>

Answer 1

我最近还需要使用bootstrap表单样式来避免冲突，并且我发现你可以使用：{{{{{{我在引导状态（或你自己的自定义版本）中包围所有@imports 1}}并重建bootstrap。现在每个CSS选择器都会以.bootstrap { ... }为前缀。

Answer 2

是。这是一个丑陋的方法，你将进入DOM Bashing（性能较慢）。你有什么理由不能重构代码并完全分离引导样式吗？

Answer 3

我认为没有任何理由不起作用，但这样做可能会产生一些性能影响 - 我不确定它们是否会足够重要。重命名冲突类可能是一个更好的主意。

以下是一些要查看的资源：

http://www.vanseodesign.com/css/css-selector-performance/

https://developer.mozilla.org/en/Writing_Efficient_CSS

这是来自Mozilla的CSS效率指南（第二个链接）：“这是显着提高性能的关键。检查给定元素所需的规则越少，样式分辨率就越快。”