css - CSS 无冲突样式

Question

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

这是否有效：将 a 添加class="bootstrap"到应该应用引导样式的祖先元素，然后更改bootstrap.css为每个前缀都rule {}带有.bootstrap rule {}？

score 2 · Accepted Answer

我最近还需要使用引导表单样式来执行此操作以避免冲突，并且我发现您可以将 bootstrap.less（或您自己的自定义版本）中的所有 @imports 包围为：.bootstrap { ... }并重建引导程序。现在每个 CSS 选择器都会以.bootstrap.

score 1 · Accepted Answer

是的。这是一种丑陋的方法，您将陷入 DOM 抨击（性能较慢）。有什么理由不能重构代码并完全分离引导样式？

score 1 · Accepted Answer

我没有看到任何不起作用的原因，但这样做可能会对性能产生一些影响——我不确定它们是否足够重要以供考虑。重命名冲突的类可能是一个更好的主意。

这里有几个资源可供查看：

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

3 回答 3