7

いくつかのスタイリングと、BEM modifierとして機能する追加のクラス ( mywidget_button--disabled ) を持つ要素が与えられた場合、練習として!important句を使用する意味はありますか?

.mywidget__default ~ .mywidget__button {
    border: 1px solid #000;
}

.mywidget__button--disabled {
    border: 1px solid transparent !important;
}

最初のクラスはより具体的で、2 番目のクラスに勝ちますが、(理論的には) 「一般的な」スタイリングよりも優先度が高い修飾子を無効にするクラスであるため、!important句に依存するのは正しいですか?

それとも、コードが頭の痛い問題になりやすいのでしょうか?

4

6 に答える 6

3

`!important` をいつまでも使用する理由として考えられるのは、2 つだけです。

  • たとえば、サイトのスタイルを変更する JavaScript を取得するある種のウィジェットを埋め込んだ場合など、制御できないサードパーティのライブラリから挿入されたインライン スタイルを上書きします。

  • デバッグ中に、実際に編集しているセレクターが目的のものを選択するかどうかをアサートします。次のようなことを行うことができbackground: #f00 !important;、正しい場所にいるかどうかをほぼ確実に確認できます。このような宣言は、誤って管理された特定性を上書きする可能性が非常に高くなります。

BEM を使用する!importantと、作成したコードを制御するために使用する必要はありません。BEM クラスを使用すると、すべてに 1 つのクラスを追加し、ネストせずに CSS にクラスの長いリストを作成できます。名前の間隔は一意であり、明確に定義されたモジュール性があります。その結果、 を使用する主な誤った理由であるスタイル リークや特異性の問題がなくなり!importantます。

于 2015-10-15T17:31:51.793 に答える
1

もちろん、 !important を使用する必要がない方がよいでしょう

BEM の命名規則は、そのようなトリックに解決する必要がないように、できるだけ広く適用する必要があります。

BEM の主な利点は、要素を非常に正確なレベルでターゲットにしていることです。

この場合、.mywidget__default ~ を使用せずに解決策を見つけようとします。これにより、.mywidget__button を単独で宣言できますが、あなたの場合は不可能な場合があります。

于 2015-09-22T10:48:19.527 に答える
1

!important 宣言は、どうしても必要な場合を除き、使用しないでください。

たとえば、現在警告ポップアップに無効なボタンを追加しています。このボタンには、透明な境界線ではなく赤い境界線が必要になり、!important がある場合は不可能です。無効化されたボタン

于 2015-09-22T10:48:47.283 に答える
1

!important大丈夫だと思います。個人的には、最初のルールとして具体的に書かないようにしています。

.mywidget__button.mywidget__button--disabled {
    border: 1px solid transparent;
}
于 2015-09-22T10:38:41.867 に答える
1

私の経験に基づいて !important は通常、複数の Web パーツに独自のスタイルシートがある場合に問題を引き起こす可能性があります。CSS で !important を使用しないようにすることをお勧めします。セレクターが特定のものである限り、!important を使用する必要はありません。

于 2015-09-22T10:45:30.180 に答える