CSSのスタイルの適用順序には、詳細度という仕組みが存在する。
CSSを設計する上では欠かせない概念であるためメモ。
詳細度とは
詳細度とは、スタイルを適用する命令の強さである。
id、class、タグ要素等、各セレクタ自体が詳細度を持ち、その強さは三段階になっている。
※ここでは仮に(A, B, C)とする
セレクタごとに詳細度を合計した後、A > B > Cの順で評価される。
例えば(1, 0, 0)と(0, 10, 10)を比較した場合、B・Cに関わらずAが大きい前者が優先される。
※同じ詳細度が複数存在する場合は、最後に記述されたスタイルを適用する。
セレクタ毎の詳細度
| 名称 | セレクタの例 | 詳細度 |
|---|---|---|
| 全称セレクタ | * | (0, 0, 0) |
| タグ要素・擬似要素 | p, h1, :before{}, :after{} | (0, 0, 1) |
| クラスや擬似クラス | .classname, :hover{} | (0, 1, 0) |
| ID | #idname | (1, 0, 0) |
詳細度の例外
詳細度の計算には下記のような例外が存在する。
インラインスタイル htmlに直接記述する方法
html <要素名 style="プロパティ : 値 ;">ほげほげ</要素名>
インラインスタイルが記述されている箇所は、CSSでの指定を詳細度を無視して上書きしてしまう。!important
強制的にスタイルを適用させる方法
CSS p { background: red !important; }
上記のインラインスタイルも無視して強制的にスタイルを上書きする方法。
まとめ
詳細度は、複数の要素が組み合わさることで容易に見通しの悪いソースとなってしまう。
下記を意識した設計を心がけることで、変化に強く修正のし易いソースを書くことができる。
idでのスタイル指定を行わず、classやタグ要素などのセレクタを用いる
- 高い詳細度を持っているidを使って設定してしまうと、変更が適用しづらく修正が難しくなる
インラインスタイルを使わない
- インラインスタイルを用いた場合、!importantで打ち消すしかなくなってしまう
- htmlソース内に記述されているため、CSSの修正のみで完結しない
!importantを使わない
- 前述したように、!importantを打ち消せるのは!importantで、かつ詳細度の高い指定のみとなるため、設計が破綻しやすい
参考
エンジニアはもう一度CSSとちゃんと向き合ってみよう - 詳細度編 - Qiita
