どうも、やん(@yan_tzn)です。
今回は、CSSの上書きのルールと詳細度についてまとめてみました。
CSSの基本的な書式
CSSの基本的な書式は、次のとおりです。
CSSの適用される順序
後から書いた方が優先される
CSSは、一度設定されたプロパティの値をあとから出てきた、プロパティで上書きされる特徴があります。
See the Pen GmmeoV by yantzn (@yantzn) on CodePen.
上記のように、デフォルト青文字color:#005bef;でfont-size:30pxにしていますが
後から記述した赤文字color:#f44242でfont-size:14pxが適用されます。
このように後から記述したCSSがデフォルトで記述していたCSSより強くなります。
あまりにも強すぎる『!important』
CSSのプロパティに、『!important』と追加すると、指定されたプロパティは『最強』になり、上書きすることが出来なくなります。
See the Pen ybbwwj by yantzn (@yantzn) on CodePen.
先ほどは、後から記述した赤文字color:#f44242でfont-size:14pxが適用されていましたが、
『!important』を追加したことで上書き出来なくなりました。
CSSの強さを決定する「詳細度」
CSSの強さ・弱さは使用されているセレクタによって決まります。
See the Pen WjORLj by yantzn (@yantzn) on CodePen.
上記のようなCSSが書かれている場合、先に記述している宣言ブロックのスタイルの方がクラス名を指定していることで強いため青色color:#005befで上書きされなくなります。
宣言ブロックに書かれているスタイルの強さは、使われている『セレクタ』の点数で決まります。
その点数を『詳細度』と呼び、点数が高いほど、点数の低いスタイルのプロパティを上書きします。
詳細度の計算方法
CSSで使うセレクタは、『単純セレクタ』というものを組み合わせて記述します。
上のCSSだと、pと.testが『単純セレクタ』にあたります。
この単純セレクタには、それぞれ詳細度の点数がついています。
組み合わせた単純セレクタの点数の合計値が、そのセレクターの『詳細度』になります。
全体セレクタ(*):０点
タイプセレクタ、擬似要素:１点
クラスセレクタ、属性セレクタ、擬似クラス：１０点
idセレクタ:１００点
HTMLのstyle属性:１０００点
上記のように単純セクレタの点数は、決まっています。
下記CSSの詳細度を計算してみましょう。
pのタイプセレクタで1点、.testのクラスセレクタで10点になり、詳細度は「11点」となります。
「単純セレクタの点数を合計する」という考え方で問題ないはずなので、簡単ですね！
まとめ
いかがだったでしょうか。
僕自身、CSSの上書きルールは何となくわかっているつもりでしたが、
「あれー？CSS反映されないなー」とかいう場面が多々ありました。
この詳細度を全然理解していなかったのでが原因です。
今回、詳細度を理解できたので、メンテナンス性の高いCSSを書けるように意識していこうと思います。
