CSS无冲突样式 [英] CSS no-conflict styles

问题描述

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

What's a good way to create a no-conflict version of a CSS stylesheet? Let's say you have a bunch of code with classes that overlap with Bootstrap's classes.

这是否有效:在要应用引导样式的祖先元素中添加 class ="bootstrap" ，然后更改 bootstrap.css 以为每个规则{} 与 .bootstrap规则{} ?

Is this valid: adding a class="bootstrap" to the ancestor element under which bootstrap styles should be applied, and then changing bootstrap.css to prefix every rule {} with .bootstrap rule {}?

推荐答案

我看不到任何不起作用的原因，但这样做可能会影响性能-我不确定它们是否会起作用足够重要的考虑.重命名冲突的类可能是一个更好的主意.

I don't see any reason that would not work, but there are probably some performance implications to doing that - I'm not sure if they would even be significant enough to consider. It would probably be a better idea to rename the conflicting classes.

这里有一些资源可供签出:

Here are a couple of resources to check out:

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

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

这来自Mozilla的CSS效率指南(第二个链接):这是显着提高性能的关键.检查给定元素所需的规则越少，样式解析就越快."

And this is from Mozilla's CSS efficiency guidelines (2nd link): "This is the key to dramatically increasing performance. The fewer rules required to check for a given element, the faster style resolution will be."

这篇关于CSS无冲突样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！