CSS无冲突风格

时间:2012-04-30 22:44:01

标签: css

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

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

3 个答案:

答案 0 :(得分:2)

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

答案 1 :(得分:1)

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

答案 2 :(得分:1)

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

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

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

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

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