☰

!important はパフォーマンスに悪影響を及ぼしますか? 質問する

tag-icon • tag-icon css performance
!important はパフォーマンスに悪影響を及ぼしますか? 質問する

私はこれらが嫌いです。これは CSS のカスケード特性に反しており、注意して使用しないと、さらに追加するというループに陥ってしまいます!important。

しかし、それらがパフォーマンスに悪影響を与えるかどうかを知りたいのです。

編集
(素早い) 回答から、パフォーマンスに (重大な) 影響はないだろうと結論付けることができます。しかし、たとえそれが他の人を思いとどまらせるための単なる追加的な議論だとしても、知っておいてよかったです ;)。

編集2
BoltClock は、宣言が 2 つある場合、!important仕様では最も具体的な宣言が選択される、と指摘しました。

ベストアンサー1

パフォーマンスに目立った影響はないはずです。FirefoxのCSSパーサー/source/layout/style/nsCSSDataBlock.cpp#572そしてそれが関連するルーチンであり、処理だと思います上書きCSS ルールの。

単に「重要」かどうかをチェックするだけのようです。

  if (aIsImportant) {
    if (!HasImportantBit(aPropID))
      changed = PR_TRUE;
    SetImportantBit(aPropID);
  } else {
    // ...
  }

また、コメントsource/layout/style/nsCSSDataBlock.h#219

    /**
     * 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.
     * 
     * ...
     */

  1. Firefox は手動で記述されたトップダウン パーサーを使用します。どちらの場合も、各 CSS ファイルは StyleSheet オブジェクトに解析され、各オブジェクトには CSS ルールが含まれます。

  2. Firefoxは、すべてのルールを正しい順序で適用した後、終了値を含むスタイルコンテキストツリーを作成します。

CSS パーサー Firefox

出典: http://taligarsiel.com/Projects/howbrowserswork1.htm#CSS_parsing

上で説明したオブジェクトモデルの場合、パーサーは、!importantその後のコストをあまりかけずに、影響を受けるルールを簡単にマークできることがわかります。パフォーマンスの低下ではありませんに対する良い反論!important。

ただし、他の回答で述べられているように、保守性は低下します。これが、それらに対する唯一の反論になるかもしれません。

おすすめ記事