208

私は数か月間ウェブサイトで作業してきましたが、何かを編集しようとしているときは、多くの場合、次のように使用する必要が!importantあります。

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

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

4

9 に答える 9

272

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

何が問題になっていますか!important：

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

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

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

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

button.highlight {
    color: blue !important;
    font-size: 1.5em;
}

その場合、colorプロパティはfont-sizeよりも重要になります。button#buyNow実際、フォントサイズ（通常のIDとクラスの特異性によって管理されます）とは対照的に、色はセレクターの色よりも重要です。

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

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

  1. セレクターは、その中のすべてのルールの重要性を正確に伝えていません
  2. 青を上書きする唯一の方法は、セレクターなどで別の !important宣言を使用することです。button#buyNow

これにより、スタイルシートの保守とデバッグが非常に困難になるだけでなく、雪だるま式の効果が始まります。ある人!importantは別の人にそれを無効にし、さらに別の人はそれを無効にするなどにつながります。それはほとんど1つだけにとどまることはありません。1つ!importantは有用な短期的な解決策になる可能性がありますが、長期的にはお尻に噛み付くように戻ってきます。

いつ使用しても大丈夫ですか：

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

これは!important、そもそも発明されたものです。つまり、ユーザーにWebサイトのスタイルを上書きする手段を提供することです。スクリーンリーダーや広告ブロッカーなどのユーザー補助ツールでよく使用されます。

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

一般的に、これはコードの臭いの場合だと思いますが、選択肢がない場合もあります。開発者として、コードを可能な限り制御することを目指す必要がありますが、手を縛られて、存在するものをすべて処理する必要がある場合があります。!important慎重に使用してください。

  • ユーティリティクラス

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

結論

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

許容できる場合や好ましい場合もありますが、使用する前に、それらのケースの1つが実際に状況に当てはまるかどうかを再確認してください。

于 2010-09-14T07:31:55.307 に答える
18

!important次のことを実行して、ステートメントを常に適用するように強制します。

  • セレクターの具体性が低く、レベルが低い場合でも、具体性の高いセレクターよりも優先されるようになりました
  • 通常はそのステートメントをオーバーライドするステートメントがさらに出現した場合、重要なステートメントはそれ以上オーバーライドされません。

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

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

  • ユーザーがカスタム スタイルシート (重要としてマークされたルールをオーバーライドできない) を使用できないようにするため、一部の人々のアクセシビリティが損なわれます。
  • 心は通常非常に簡単に具体化するため、コードを読みにくくしますが、何が何であるかを覚えておく!importantと読みにくくなります
于 2010-09-14T07:26:52.273 に答える
10

2014 年末に作業草案にさらに多くの規則が追加されているため、ユーザーに制限を課さないことが非常に重要です。このようなことが起こる可能性のあるシナリオを説明するために、この小さな例を書きました。これは私が Web 上で訪れた REAL の Web サイトから取ったもので、残念ながら頻繁に目にします。

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

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 タグを削除する必要があることを思い出したでしょう。しかし、あなたは1つ忘れました..

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

もちろん、テキストボックスが空なので、あなたはこれに気づきません。そして、あなたはそれがうまくいくと思います！(思い込みは開発者にとって最悪の敵であり、プライドと傲慢さですぐそこにあります)。

自己暗示的なルールを作り、それに従う

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

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

拡張機能などのツールが存在し、'userstyles.org' のようなスタイリッシュなサイトが存在する場合、!important タグを使用することでユーザーを遠ざけるリスクがあります。スタイリッシュはそれらを上書きしないことに注意してください。

訪問者を制限しない

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

広告

広告の削除にスタイリッシュを使用する人はますます少なくなっているので、ここでは !important で広告を保護することは本当に問題ではないと思います。サイトをカスタマイズしようとしている人を困らせるだけです。

于 2014-11-28T13:20:10.443 に答える
8

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

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

于 2010-09-14T07:49:03.207 に答える
8

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

なし!important:

.set-color{
  color: blue;
 }

.set-color{
  color: red;
 }

赤を出力

!importanton bottom 属性(同じの)

.set-color{
  color: blue;
 }

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

赤を出力します（とにかく赤でした）

!importanton top 属性(の)

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

.set-color{
  color: red;
 }

青を出力します（赤を無視し、青を使用します）

于 2016-02-29T05:08:52.380 に答える
5

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

問題は、それらを多すぎると、一方が他方を誤って上書きする可能性があることです。あなたのコードもはるかに読みにくく、CSSで何かをするたびに重要なことを見つけようとするのは大変な苦痛なので、これを維持するためにあなたの後に来る人は誰でも彼/彼女の髪を引き裂くでしょう。

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

于 2010-09-14T07:29:48.350 に答える
3

まあ、!importantwp-pluginsのデフォルトプロパティを上書きしたい場合は、「仕事をしなければならない」ことがあると思います。

私は今日それを使用しましたが、それが私の仕事を終える唯一の方法でした. 何かを行うには良い方法ではないかもしれませんが、それが唯一の方法である場合があります。

于 2016-02-02T13:28:08.020 に答える
-1

!important は要因です。これにより、オーバーライドされたものに対してコードが無駄になる可能性があります

！それは論理的ではないという意味ではありません。そのため、ここではそのコードの中でそれと当惑します。!important は、コンピューティングにおける大きな事故になることがよくあります。

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

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

!importantは避けるのが最善のキーワードです. いつ使うか, 影響力のある時期かもしれません. このリンクをクリックしていつ使うかを確認してください. !important, !重要なスタイルルール - CSS-Tricks

!important の使用を避ける

どうでもいい

于 2018-12-05T17:58:20.003 に答える