从可维护性角度考虑css的!important规则的可用性
发布时间：2014-06-05 16:10:32 作者：佚名 
我要评论
我要评论使用!important对于性能并没有什么负面影响。但是从可维护性角度考虑还是少用这个规则。不过这个规则在IE6中有bug
最近在做项目中发现很多CSS代码里面都使用!important去覆盖原有高优先级的样式。按照常理来说，越是灵活的东西，需要做的工作就会更多。所以想当然的认为像!important这样灵活、方便的规则如果用得多的话肯定会对性能有所影响。基于这种考虑，本来想把所有的这些样式通过提高优先级给去掉的。不过后来一想，还是去google一下吧，猜想一般都是不可靠的。
if (aIsImportant) {
if (!HasImportantBit(aPropID))
changed = PR_TRUE;
SetImportantBit(aPropID);
} else {
// ...
/**
* Transfer the state for |aPropID| (which may be a shorthand)
* from |aFromBlock| to this block. The property being transferred
* is !important if |aIsImportant| is true, and should replace an
* existing !important property regardless of its own importance
* if |aOverrideImportant| is true.
*
* ...
*/
从上面可以看出，firefox对于!important规则的判断很简单：将包含!important的样式直接覆盖了正常生成的样式规则，然后如果解析到后面还有!important规则时，再和以前的important规则比较优先级。就是说，使用!important的CSS规则是置为了最高优先级，然后最高优先级中去判断应用那个样式。
结论就是，使用!important对于性能并没有什么负面影响。但是从可维护性角度考虑还是少用这个规则。不过这个规则在IE6中有bug（IE6 IE7(Q) IE8(Q) 不完全支持 !important 规则），使用的时候还要注意。
复制代码
代码如下:if (aIsImportant) {
if (!HasImportantBit(aPropID))
changed = PR_TRUE;
SetImportantBit(aPropID);
} else {
// ...
复制代码
代码如下:/**
* Transfer the state for |aPropID| (which may be a shorthand)
* from |aFromBlock| to this block. The property being transferred
* is !important if |aIsImportant| is true, and should replace an
* existing !important property regardless of its own importance
* if |aOverrideImportant| is true.
*
* ...
*/
从上面可以看出，firefox对于!important规则的判断很简单：将包含!important的样式直接覆盖了正常生成的样式规则，然后如果解析到后面还有!important规则时，再和以前的important规则比较优先级。就是说，使用!important的CSS规则是置为了最高优先级，然后最高优先级中去判断应用那个样式。
结论就是，使用!important对于性能并没有什么负面影响。但是从可维护性角度考虑还是少用这个规则。不过这个规则在IE6中有bug（IE6 IE7(Q) IE8(Q) 不完全支持 !important 规则），使用的时候还要注意。
相关文章
- link与@import这两种方式都是为了加载CSS文件,但还是存在着细微的差别。下面脚本之家小编给大家介绍CSS中link和@import的区别说明，感兴趣的朋友一起看下吧2016-08-12
- 下面小编就为大家带来一篇浅谈CSS 权值 层叠 重要性(!important)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-05
- 这篇文章主要介绍了CSS中的@import,是CSS入门学习中的基础知识,需要的朋友可以参考下2015-07-14
- !important只有Ie7.0和firefox可以识别，但是Ie6.0不能成功应用.!important提升优先级，下面对它的用法做下总结2014-08-08
- 这篇文章主要介绍了加了important标记css样式的jQuery写法，需要的朋友可以参考下2014-07-16
- 一直以来写CSS的时候都没有过多的考虑使用@import的方式,最近又看到有朋友在讨论关于@import的一些好坏，以及要不要使用@import的方式加载样式,需要的朋友可以了解下2012-12-12
- 本文章详细的介绍了关于link和@import的区别，有需要了解的朋友可以参考一下本文章2012-03-31
- 我们引用css文件通常有两种方式:link,@import 这两天整理了一下这两种用法的区别，加深认识2010-06-17
- 很多人，包括很多网站（我所见过的所有网站，包括国内著名的‘网页设计师’网站），都说important是不被IE所支持和认识的，可是真的是这样吗？看了下边的两个例子，也许你2010-01-05
Webpack 中 css import 使用 alias 相对路径的方法
在 Vue 项目中，我们通常使用 vue-webpack 脚手架生成工程模板，然后配置 @ 为项目根目录下放资源和源码的 /src 目录的别名。这篇文章给大家介绍Webpack 中 css import 使2018-07-24
最新评论