從可維護(hù)性角度考慮css的!important規(guī)則的可用性
發(fā)布時間：2014-06-05 16:10:32 作者：佚名 
我要評論
我要評論使用!important對于性能并沒有什么負(fù)面影響。但是從可維護(hù)性角度考慮還是少用這個規(guī)則。不過這個規(guī)則在IE6中有bug
最近在做項目中發(fā)現(xiàn)很多CSS代碼里面都使用!important去覆蓋原有高優(yōu)先級的樣式。按照常理來說，越是靈活的東西，需要做的工作就會更多。所以想當(dāng)然的認(rèn)為像!important這樣靈活、方便的規(guī)則如果用得多的話肯定會對性能有所影響。基于這種考慮，本來想把所有的這些樣式通過提高優(yōu)先級給去掉的。不過后來一想，還是去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規(guī)則的判斷很簡單：將包含!important的樣式直接覆蓋了正常生成的樣式規(guī)則，然后如果解析到后面還有!important規(guī)則時，再和以前的important規(guī)則比較優(yōu)先級。就是說，使用!important的CSS規(guī)則是置為了最高優(yōu)先級，然后最高優(yōu)先級中去判斷應(yīng)用那個樣式。
結(jié)論就是，使用!important對于性能并沒有什么負(fù)面影響。但是從可維護(hù)性角度考慮還是少用這個規(guī)則。不過這個規(guī)則在IE6中有bug（IE6 IE7(Q) IE8(Q) 不完全支持 !important 規(guī)則），使用的時候還要注意。
復(fù)制代碼
代碼如下:if (aIsImportant) {
if (!HasImportantBit(aPropID))
changed = PR_TRUE;
SetImportantBit(aPropID);
} else {
// ...
復(fù)制代碼
代碼如下:/**
* 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規(guī)則的判斷很簡單：將包含!important的樣式直接覆蓋了正常生成的樣式規(guī)則，然后如果解析到后面還有!important規(guī)則時，再和以前的important規(guī)則比較優(yōu)先級。就是說，使用!important的CSS規(guī)則是置為了最高優(yōu)先級，然后最高優(yōu)先級中去判斷應(yīng)用那個樣式。
結(jié)論就是，使用!important對于性能并沒有什么負(fù)面影響。但是從可維護(hù)性角度考慮還是少用這個規(guī)則。不過這個規(guī)則在IE6中有bug（IE6 IE7(Q) IE8(Q) 不完全支持 !important 規(guī)則），使用的時候還要注意。
相關(guān)文章
CSS中l(wèi)ink和@import的區(qū)別說明
link與@import這兩種方式都是為了加載CSS文件,但還是存在著細(xì)微的差別。下面腳本之家小編給大家介紹CSS中l(wèi)ink和@import的區(qū)別說明，感興趣的朋友一起看下吧2016-08-12淺談CSS 權(quán)值 層疊 重要性(!important)
下面小編就為大家?guī)硪黄獪\談CSS 權(quán)值 層疊 重要性(!important)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-05- 這篇文章主要介紹了CSS中的@import,是CSS入門學(xué)習(xí)中的基礎(chǔ)知識,需要的朋友可以參考下2015-07-14
css中提升優(yōu)先級屬性!important的用法總結(jié)
!important只有Ie7.0和firefox可以識別，但是Ie6.0不能成功應(yīng)用.!important提升優(yōu)先級，下面對它的用法做下總結(jié)2014-08-08加了important標(biāo)記css樣式的jQuery寫法
這篇文章主要介紹了加了important標(biāo)記css樣式的jQuery寫法，需要的朋友可以參考下2014-07-16css @import url加載樣式應(yīng)用深入分析
一直以來寫CSS的時候都沒有過多的考慮使用@import的方式,最近又看到有朋友在討論關(guān)于@import的一些好壞，以及要不要使用@import的方式加載樣式,需要的朋友可以了解下2012-12-12css中l(wèi)ink和@import的區(qū)別分析詳解
本文章詳細(xì)的介紹了關(guān)于link和@import的區(qū)別，有需要了解的朋友可以參考一下本文章2012-03-31- 我們引用css文件通常有兩種方式:link,@import 這兩天整理了一下這兩種用法的區(qū)別，加深認(rèn)識2010-06-17
- 很多人，包括很多網(wǎng)站（我所見過的所有網(wǎng)站，包括國內(nèi)著名的‘網(wǎng)頁設(shè)計師’網(wǎng)站），都說important是不被IE所支持和認(rèn)識的，可是真的是這樣嗎？看了下邊的兩個例子，也許你2010-01-05
Webpack 中 css import 使用 alias 相對路徑的方法
在 Vue 項目中，我們通常使用 vue-webpack 腳手架生成工程模板，然后配置 @ 為項目根目錄下放資源和源碼的 /src 目錄的別名。這篇文章給大家介紹Webpack 中 css import 使2018-07-24