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

しかし、私はそれらがパフォーマンスに悪いのか知りたいですか？

編集
（高速）返信から、パフォーマンスに（重大な）影響はないと結論付けることができます。しかし、それが他の人を落胆させるための追加の議論であったとしても、知っておくとよいでしょう;）

EDIT 2
BoltClockは、2つの!important宣言がある場合、仕様では最も具体的な宣言を選択することになると指摘しました。

実際にはパフォーマンスに影響はありません。で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は終了値を含むスタイルコンテキストツリーを作成します（すべてのルールを正しい順序で適用した後）。

差出人：http://taligarsiel.com/Projects/howbrowserswork1.htm#CSS_parsing

これで、上記のオブジェクトモデルの場合など、パーサーは!important簡単に影響を受けるルールにマークを付けることができます。その後のコストはそれほどかかりません。パフォーマンスの低下は、に対する適切な議論ではありません!important。

ただし、保守性は（他の回答で述べたように）影響を受けます。

!importantブラウザがルールに一致する速さの点で本質的に悪いとは思わない（セレクタの一部ではなく、宣言の一部のみを形成する）

ただし、すでに述べたように、コードの保守性が低下し、将来の変更によりコードのサイズが不必要に大きくなる可能性があります。の使用!importantも、開発者のパフォーマンスを低下させる可能性があります。

あなたがされていた場合は本当にうるさい、あなたもそれを言うことができる!importantあなたのCSSファイルに11の余分なバイトを追加し、これは本当に多くありませんが、私はあなたが公正な少数があればと思い!important、あなたのスタイルシートでSを、それがアップ追加することができます。

残念ながら、!importantパフォーマンスにどのように影響するかについてのベンチマークは見つかりませんでした。

!importantその場所があります。その上で私を信頼してください。それは私を何度も救い、あなたの問題に対するより長く、よりエレガントな方法が見つかる前に、短期的な解決策としてよりしばしば有用です。

ただし、ほとんどの場合と同様に、乱用されていますが、「パフォーマンス」について心配する必要はありません。1つの小さな1x1 GIFは、重要な場合よりもWebページでのパフォーマンスの影響が大きいと思います。

ページを最適化したい場合は、さらに多くの！重要なルートがあります;）;）

ここでは、CSSの処理中にブラウザーがそれを読み取り、!important属性に遭遇し、ブラウザーが戻ってで定義されたスタイルを適用しているのです!important。この余分なプロセスは小さな追加ステップのように見えるかもしれませんが、多くのリクエストを処理している場合は、パフォーマンスに影響を与えます。（ソース）

CSSで！importantを使用すると、通常、開発者は自己陶酔的で利己的または怠惰になります。来る開発者を尊重して...

使用時の開発者の考え方!important：

1. 私の揺れるCSSが動作していません... grrrr。
2. 私は今どうすればいい？？
3. そして、!importantええ....今では問題なく動作しています。

ただし!important、CSSを適切に管理していなかったからといって、それを使用するのは良い方法ではありません。パフォーマンスの問題よりも悪い多くの設計上の問題が発生しますが、他のプロパティを!importantし、CSSが役に立たないコードで乱雑になる。代わりに、まずCSSを適切に管理し、プロパティが相互にオーバーライドしないようにする必要があります。

私たちはすることができます使用します!important。ただし、他の方法がない場合にのみ、慎重に使用してください。

パフォーマンスに関係なく、これは悪い習慣であるため、使用しないことに同意します。これらの理由だけで、私は使用を避けます!important可能な限ります。

しかし、パフォーマンスの問題に関しては、いいえ、それは目立ちません。効果があるかもしれませんが、それは非常に小さいので、気づいてはいけません。心配することません。

注目に値するほど重要な場合は、コードだけでなく、コードに大きな問題がある可能性があります!important。使用しているコア言語の通常の構文要素を単純に使用しても、パフォーマンスの問題になることは決してありません。

お返しに、返答のある質問であなたの質問に答えさせてください。おそらく考慮しなかった角度：どのブラウザを意味しますか？

各ブラウザーには、独自の最適化を備えた独自のレンダリングエンジンがあることは明らかです。では、問題は次のようになります。各ブラウザのパフォーマンスにはどのような影響がありますか？たぶん!important、あるブラウザではパフォーマンスが悪いが、別のブラウザでは本当に良いのか？そして、おそらく次のバージョンでは、逆になりますか？

ここで私のポイントは、私たちが使用している言語の個々の構文構造のパフォーマンスへの影響について、Web開発者として考えるべきではない（または考える必要がない）ことです。これらの構文構成体は、その実行方法が原因で、私たちがやりたいことを達成するための正しい方法であるため、使用する必要があります。

システム内のピンチポイントがどこにあるかを分析するには、プロファイラーを使用してパフォーマンスの質問を行う必要があります。最初に本当にあなたを遅くしているものを修正します。個々のCSS構成要素のレベルに到達する前に修正する必要があるはるかに大きな問題があることはほぼ確実です。

パフォーマンスに大きな影響はありません。ただし、コードの保守性が低下するため、長期的にはパフォーマンスが低下する可能性があります。

使用しなければならなかった !important以前に数回したときに、目に見えるパフォーマンスの低下がないことに個人的に気づきました。

注として、使用したい理由について、このスタックの質問への回答を参照してください!important。

また、他の誰もが言及し損ねたものについても触れます。!importantこれは、JavaScript関数を書く前にインラインCSSをオーバーライドする唯一の方法です（少しでもパフォーマンスに影響します）。したがって、インラインCSSをオーバーライドする必要がある場合は、実際にパフォーマンス時間を節約できます。

うーん...！重要または!!重要？

このステップをステップごとに見ていきましょう。

1. パーサーは、使用するかどうかに関係なく、各プロパティの！importantをチェックする必要があるため、ここでのパフォーマンスの違いは0です。
2. プロパティを上書きする場合、パーサーは上書きされるプロパティが重要であるかどうかをチェックする必要があります。そのため、ここでのパフォーマンスの違いは再び0になります。
3. 上書きされるプロパティが!!重要である場合、プロパティを上書きする必要があります-！importantを使用しない場合のパフォーマンスヒットは-1
4. 上書きされるプロパティが！importantの場合、プロパティの上書きはスキップされます。！importantを使用すると、パフォーマンスが+1に向上します。
5. 新しいプロパティが！importantである場合、上書きされるプロパティが！importantまたは!! importantであるかどうかにかかわらず、パースはそれを上書きする必要があります-パフォーマンスの違い0

したがって、パーサーが他の方法ではスキップしない多くのプロパティをスキップするのに役立つため、！importantの方が実際にはパフォーマンスが優れていると思います。

@ryanが以下で言及するように、インラインCSSをオーバーライドしてJavaScriptの使用を回避する唯一の方法...不要なパフォーマンスヒットを回避する別の方法

うーん...重要であることが判明！

そしてまた、

• ！importantを使用すると、開発者の時間を大幅に節約できます
• 時にはCSS全体を再設計することからあなたを救います
• 時々htmlまたは親のcssファイルがあなたの制御下にないため、そこであなたの命を救います
• 重要な要素が他の重要な要素によって誤って上書きされることを明らかに防止します。
• また、ブラウザーはセレクターで特定しすぎず、適切なプロパティを選択しない場合があるため、！importantを使用することが本当に重要になり、CSSで特定のCSSセレクターのトンを作成する手間が省けます。だから重要なことを書くためにより多くのバイトを使用したとしても、それは他の場所でバイトを節約できるでしょう。そして、私たち全員が知っているように、CSSセレクターは混乱する可能性があります。

したがって、！importantを使用すると開発者を幸せにすることができると思います。これは非常に重要だと思います：D

!important本来、パフォーマンスの低下を予測することはできません。ただし、CSSにが含まれて!importantいる場合は、セレクターを修飾しすぎて具体的すぎて、親または修飾子が不足して具体性を追加したことを示しています。その結果、あなたのCSSは、肥大化（どのようになっただろうになるパフォーマンスを低下）し、維持するのが難しいです。

効率的なCSSを記述したい場合は、必要なだけ具体的にして、モジュラーCSSを記述したい。ID（ハッシュを含む）、チェーンセレクター、または修飾セレクターの使用は控えることをお勧めします。

#CSSで接頭辞が付けられたID は、255のクラスがIDをオーバーライドしないところまで、悪質に特定されています（次のように調整します：@Faust）。しかし、IDにはより深いルーティングの問題もあります。IDは一意である必要があります。つまり、IDを重複したスタイルに再利用することができないため、繰り返しのスタイルで線形のCSSを作成することになります。これを行うことの影響は、規模によってプロジェクトごとに異なりますが、保守性は非常に悪化し、場合によってはパフォーマンスも低下します。

!important、チェーン、修飾、またはID（つまり#）なしで具体性を追加するにはどうすればよいですか？

HTML

<div class="eg1-foo">
    <p class="eg1-bar">foobar</p>
</div>
<div id="eg2-foo">
    <p id="eg2-bar">foobar</p>
</div>
<div class="eg3-foo">
    <p class="eg3-foo">foobar</p>
</div>

CSS

.eg1-foo {
    color: blue;
}
.eg1-bar {
    color: red;
}
[id='eg2-foo'] {
    color: blue;
}
[id='eg2-bar'] {
    color: red;
}
.eg3-foo {
    color: blue;
}
.eg3-foo.eg3-foo {
    color: red;
}

JSFiddle

さて、それはどのように機能しますか？

最初と2番目の例は同じように機能し、最初の例は文字通りクラスであり、2番目の例は属性セレクターです。クラスと属性セレクターは同一の特異性を持っています。.eg1/2-barから色を継承しない.eg1/2-foo独自のルールがあるため。

3番目の例は、セレクターの修飾またはチェーンのように見えますが、どちらでもありません。連鎖とは、セレクターに親、祖先などのプレフィックスを付けることです。これは特異性を追加します。修飾も同様ですが、セレクターが適用する要素を定義します。適格性：ul.classおよび連鎖：ul .class

このテクニックを何と呼ぶか​​わかりませんが、動作は意図的なものであり、W3Cによって文書化されています

同じ単純なセレクターの繰り返し出現が許可され、特異性が向上します。

2つのルール間の特異性が同一である場合はどうなりますか？

以下のよう@BoltClockが指摘そこの、複数の！重要な宣言というスペックおもむくままならば、ほとんどの特定の 1を優先すべきです。

以下の例では、両方が同じ特異性.fooを.bar持っているため、動作はCSSのカスケードの性質にフォールバックし.fooます。これにより、CSSで宣言されている最後のルールが優先順位を要求します。

HTML

<div>
    <p class="foo bar">foobar</p>
</div>

CSS

.bar {
    color: blue !important;
}
.foo {
    color: red !important;
}

JSFiddle