1. ホーム
  2. css

[解決済み】 !importantはパフォーマンスに悪い?

2022-04-18 02:39:14

質問

CSSのカスケード機能を無視することになるし、注意して使わないと、さらに追加していくというループに陥ってしまうからだ。 !important .

でも、性能的には問題ないのでしょうか?

EDIT

早い)返信から、パフォーマンスに(大きな)影響を与えないと結論付けられます。 しかし、それは他の人を思いとどまらせるための余分な議論であるとしても、知ることは良いことです;)。

EDIT 2

BoltClockの指摘により、2つある場合は !important の宣言は、仕様では最も具体的なものを選ぶとされています。

解決方法は?

パフォーマンスへの明らかな影響はないはずです。参照 での Firefox の CSS パーサーは /source/layout/style/nsCSSDataBlock.cpp#572 を処理し、それが関連するルーチンだと思います。 上書き CSSルールの

単純に"important"をチェックしているだけのようです。

  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 は、最終的な値を含むスタイル コンテキスト ツリーを作成します。 (すべてのルールを正しい順序で適用した後)

From: http://taligarsiel.com/Projects/howbrowserswork1.htm#CSS_parsing

さて、上記のようなオブジェクト モデルがある場合、パーサーは !important を簡単に、しかもその後のコストをあまりかけずに行うことができます。パフォーマンスの低下 はありません。 に対する正論 !important .

しかし、(他の回答が述べているように)保守性が損なわれてしまうので、それが唯一の反論かもしれません。