CSS无冲突样式

Question

3

如何创建一个无冲突版本的CSS样式表？假设你有一堆代码，其中的类与Bootstrap的类重叠。

以下方法是否有效：在祖先元素中添加class="bootstrap"，并将bootstrap.css中的每个rule {}修改为.bootstrap rule {}来应用Bootstrap样式？

- atp

3个回答

1

是的。那是一种丑陋的方法，而且会导致DOM Bashing（性能变慢）。您是否有任何理由不能重新构建代码并完全分离引导样式？

- jake

假设我不能更改冲突的第三方CSS（因此需要一个无冲突版本）。 - atp

1

我认为这样做没有任何问题，但可能会对性能产生一些影响 - 我不确定它们是否足够显著以至于需要考虑。最好的方法可能是重命名冲突的类。

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

这是来自 Mozilla 的 CSS 效率指南（第二个链接）中的内容：“这是显著提高性能的关键。对于给定元素，需要检查的规则越少，样式解析速度就越快。”

- Andrew

1

你可能也想试试Andy Edinborough的CSS压力测试工具：http://andy.edinborough.org/CSS-Stress-Testing-and-Performance-Profiling - Andrew

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mark Gibson · Accepted Answer

最近我也需要使用bootstrap表单样式来避免冲突，我发现你可以在bootstrap.less(或者你自己的定制版本)中将所有的@import语句用.bootstrap { ... }包围起来，并重新构建bootstrap。现在每个CSS选择器都会带有前缀.bootstrap。