web-dev-qa-db-ja.com

CSSで「！important」を使用する意味は何ですか？

私は数か月間ウェブサイトに取り組んでおり、何かを編集しようとすると何度も!importantを使用する必要がありますたとえば：

div.myDiv { 
    width: 400px !important;
}

期待どおりに表示するために。これは悪い習慣ですか？または、!importantコマンドを使用しても大丈夫ですか？これにより、さらに望ましくないものが発生する可能性がありますか？

htmlcsscss-specificity
189
Kyle

はい、あなたの!importantの使用例は悪い習慣だと思います。そして、それは将来的に望ましくない効果を引き起こす可能性が非常に高いです。だからといって、決して大丈夫というわけではありません。

!importantの問題点：

特異性 は、CSSがページにどのように影響するかをブラウザーが決定する際に働く主な力の1つです。セレクターが具体的であればあるほど、セレクターに重要度が追加されます。これは通常、選択した要素が発生する頻度と一致します。例えば：

button { 
    color: black; 
}
button.highlight { 
    color: blue; 
    font-size: 1.5em;
}
button#buyNow { 
    color: green; 
    font-size: 2em;
}

このページでは、すべてのボタンは黒です。クラスが「ハイライト」のボタンは例外で、青です。 IDが「buyNow」の一意のボタン（緑色）を除きます。ルール全体の重要度（この場合は色とフォントサイズの両方）は、セレクターの特異性によって管理されます。

[SOME_CODE]ただし、セレクタレベルではなくプロパティレベルで追加されます。たとえば、このルールを使用した場合：

!important

その場合、colorプロパティはfont-sizeよりも重要度が高くなります。実際、色はbutton.highlight { color: blue !important; font-size: 1.5em; } セレクターの色よりも重要です。これは、font-size（通常のIDとクラスの特異性によって依然として管理されています）とは対照的です。

要素button#buyNowのフォントサイズは<button class="highlight" id="buyNow">ですが、色はblueです。

これは2つのことを意味します。

  1. セレクターは、その中のすべてのルールの重要性を正確に伝えません
  2. 青を上書きするonly方法は、another2em宣言を使用することです。たとえば、!importantセレクター。

これにより、スタイルシートの保守とデバッグが非常に難しくなるだけでなく、Snowballエフェクトが開始されます。 1つのbutton#buyNowが別の!importantを導き、それをオーバーライドし、さらに別の_をオーバーライドします。 1つだけではほとんどありません。 1つの!importantが便利な短期的な解決策である場合でも、長い目で見ればお尻を噛むように戻ってきます。

いつ使用してもいいですか：

  • ユーザースタイルシートでスタイルをオーバーライドします。

これは、最初に!importantが発明されたものです。ユーザーにWebサイトのスタイルをオーバーライドする手段を提供するためです。スクリーンリーダー、広告ブロッカーなどのアクセシビリティツールで多く使用されています。

  • サードパーティのコードとインラインスタイルをオーバーライドします。

一般的に、これはコードのにおいの場合だと思いますが、場合によっては選択肢がありません。開発者として、コードをできる限り制御することを目指してください。ただし、手を縛られて、存在するものを操作する必要がある場合があります。 !importantは慎重に使用してください。

  • ユーティリティクラス

多くのライブラリとフレームワークには、.hidden、.error、または.clearfixなどのユーティリティクラスが付属しています。それらは単一の目的を果たし、多くの場合、非常に少数ですが非常に重要なルールを適用します。 （たとえば、display: noneクラスの場合は.hidden）。これらは、要素に現在ある他のスタイルを上書きし、あなたが私に尋ねた場合、!importantを確実に保証する必要があります。

結論

!important宣言の使用は、CSSのコアメカニズムの1つである特異性を損なう副作用があるため、しばしば悪い習慣と見なされます。多くの場合、これを使用すると、CSSアーキテクチャが不十分である可能性があります。

耐えられる、または好まれる場合もありますが、使用する前にそれらのケースの1つが実際に状況に当てはまることを再確認してください。

247
Stephan Muller

!importantは、ステートメントを常に適用し、次のことを実行します。

  • セレクターの特異度が低く、レベルが低い場合でも、セレクターの特異度が高いセレクターに勝る
  • 通常そのステートメントをオーバーライドするステートメントがさらに発生した場合、重要なステートメントはそれ以上オーバーライドされません。

ほとんどの場合、!importantは回避できます。これは、セレクターの特異性がどれを有効にするかを処理するためです。これはカスケードスタイルの考え方です。ただし、特異性がそれほど論理的ではなく、ステートメントに!importantを強制しなければならない状況もあります（正確な状況を覚えていない場合があります）。

!importantを使用/回避しない理由

  • ユーザーがカスタムスタイルシート（重要としてマークされたルールをオーバーライドできないようになった）を使用できないようにします。
  • 心は通常非常に簡単に特異性をとるため、コードを読みにくくしますが、!importantとは何かを思い出すと読みにくくなります
16
Delan Azabani

これについてもう一度触れておくことが重要だと思います。2014年の終わりに、より多くのルールがワーキングドラフトに追加されるので、ユーザーに制限を課さないことが非常に重要です。私は、このようなことが起こる可能性のあるシナリオを説明するために、この小さな例を書きました。これは、私がウェブ上で訪れた実際のウェブサイトから取られたものであり、残念ながら私はそれを頻繁に見ています。

フォームテキストエディターのフィールド

Webサイトがあり、そのWebサイトはフォームの入力とテキストの編集に依存しています。目の疲れを最小限に抑えるために、誰もが大丈夫だと思うスタイルを選択してください。ユーザーは主に夜間にアクセスするため、背景色を白にし、テキストの色を黒にすることにします。デフォルトではフォームは空白なので、テキストを入力して（今回は）確実に機能するようにします。

...
background-color: black; /* I forgot important here, but it works fine on its own */
color: white !important;
...

数ヶ月後、ユーザーは黒地に白が目を痛めると不満を言うが、他の半分はそれを愛している、あなたはどうする？内部のスタイルをオーバーライドするために！importantを使用するカスタムテーマを追加して、両方の関係者が満足するようにします。これは、次の目的で使用されます。

...
background-color: white !important;   
color: black !important;
...

さて、ここで何が起こりますか？ 何を期待していましたか。最初のセットの！importantタグを適切に覚えていれば、それが機能しないことに気付き、おそらく！importantタグを削除する必要があることを覚えているでしょう。でも忘れてた.

右、白い背景に白いテキストが表示され、この新しいスタイルを使用しようとすると、ユーザーはWebページをまったく読むことができなくなります（これを維持した場合）。

もちろん、テキストボックスが空であるため、あなたはこれを理解していません。そして、あなたはそれが機能すると仮定します！ （仮定は開発者にとって最悪の敵であり、誇りと慢さですぐそこにあります）。

自己暗黙ルールの作成とフォロー

したがって、基本ルールは、CSSルールの元のcompleteセットに対してOVERRIDESを設計するときにのみ！importantを使用する必要があります。それは例外のためのものであり、そもそもCSSの自然な秩序と意味を乱すことを忘れないでください。ほとんどの場合、まったく使用する必要はありません。

ユーザーが色をカスタマイズする方法を知る

拡張機能などのツールが存在し、「userstyles.org」などのサイトが存在し、それに対応するスタイリッシュなツールであるため、！importantタグを使用することでユーザーを疎外する危険があります。スタイリッシュがそれらを無効にしないことに注意してください。

訪問者を制限しない

スタイルで！importantを使用する場合は、ユーザーがそのスタイルをオフにできるようにしてください（Webブラウザーの内部「オン/オフ」スイッチ経由では意味がありません）。そして、天国のためにしないでくださいそれをデフォルトにします。

広告

人々はますますスタイリッシュな広告の削除を使用しなくなっているので、！importantで広告を保護することは本当に問題だとは思いません。それはあなたのサイトをカスタマイズしようとする誰かをいらいらさせるだけです。

9
osirisgothra

この質問に少し遅れましたが、「他のスタイルが適用されていても無視して、このスタイルを使用してください」と言っています。 !の（!importantの）_frontとは少し混乱するかもしれません。これは、javascriptではnot演算子ですが、cssでは優先トークンと呼ばれるデリミタトークンと呼ばれるためです。例を示します。

!importantなし：

.set-color{
  color: blue;
 }

.set-color{
  color: red;
 }

出力RED

!important下部属性（同じ）

.set-color{
  color: blue;
 }

.set-color{
  color: red !important;
 }

出力RED（とにかく赤だったはずです）

!important上の属性（同じ）

.set-color{
  color: blue !important;
 }

.set-color{
  color: red;
 }

出力BLUE（赤を無視、青を使用）

6
garrettmac

私にとって、!importantの使用はCSSの悪い習慣です。プロパティが上から下に適用されるCSSルールを適用する際の自然な流れを混乱させます。 !importantを使用すると、プロパティは最新の重要な値を優先するようになります。

スクリプトでgotoキーワードを使用するのと同じです。完全に合法ですが、それでも回避するのが最善です。

4
gianebao

既存のプロジェクトに取り組んでいるときに必要な場合を除き、使用することはお勧めしません。 しかし、それから離れて、できるだけ少ない重要なものを使用するようにしてください。

問題は、それらをあまりにも多く使用すると、一方が他方を誤って上書きしてしまう可能性があることです。あなたのコードははるかに読みにくいであり、これを維持するためにあなたの後に来る人は誰でも毎回！ CSSで何かをするのは王室の痛みです。

これを確認してください： http://webdesign.about.com/od/css/f/blcssfaqimportn.htm

4
Sidharth Panwar

まあ、wp-pluginsのデフォルトのプロパティを上書きしたいなら、!importantを使うのはいつか「やらなければならない」と思う。

私は今日それを使用し、それが私の仕事を終える唯一の方法でした。たぶん何かをする良い方法ではありませんが、いつかそれをする唯一の方法です。

2
Emanuel Pietri

!importantの問題は、CSSを使用する場合、すべての場合において、深い選択（優先度が高い）を避けなければならないことです。元のスタイルを変更せずにスタイルを変更すると、このスタイルを変更する自由が制限されます。彼は!importantもより深いセレクタで使用する必要があります。

0
gdfgdfg

！importantは要素であり、オーバーライドされる何かのためにコードを無駄にする可能性があります

！それは論理的ではないという意味ではなく、ここではそのコードの中でそれを混乱させる。 ！importantは、しばしばコンピューティングの巨大な事故です。

たとえば、display: block;にしたいが、すでにdisplay: none;を定義している場合：

p {
   display: none;
   display: block !important /*Now overriden*/;
}
<p>Some Paragraph</p>

!importantは回避するのがベストなキーワードです。使用する場合は影響が出る可能性があります。このリンクをクリックして!importantを使用するタイミングを確認してください ！ルール-CSS-Tricks

Avoid using !important

いいえ何

0
PIZZZZZZZZZZZA is here