コード日進月歩

しんくうの技術的な小話、メモ、つれづれ、など

CSSの!importantはなるべく使わないためには

案外、これに関して言及しているところがないので書いてみる

CSSの!importantとは

CSSの反映されるものを決める 詳細度 という概念があるが、そこで決まる順番とは関係なく設定できる記述

cssは後勝ちなので、後の記述のほうが優先されるが、以下の例の場合はblueの記述のほうが優先される

.sample h1{
  color: blue!important;
}
 
.sample h1{
  color: orange;
}

使いたくなったらどうするか

MDNのドキュメントに記述があるのでそこを参考にすると良い

いくつかの経験則
・!important を考える前に、常に詳細度を使用する方法を探しましょう。
・ページ固有の CSS が外部の CSS (ブートストラップや正規化 CSS などの外部ライブラリなど) を上書きする場合のみ、 !important を使用しましょう。
・決してプラグインマッシュアップを書いている時に、 !important を使わないようにしましょう。
・決してサイト全体の CSS で !important を使わないようにしましょう。
- 詳細度 - CSS: カスケーディングスタイルシート | MDN

基本的には自身で管理できるCSSの範疇内では使わず、他の道を常に模索するべきという指針が述べられている

参考リンク