BLOG

「CSSが反映されない!」その原因はスタイルシートの詳細度にあるかも。基本を抑えてスマートなCSS設計を。

こんにちは、フロントエンドエンジニアのなごみ(@nagomixxxx)です。

HTMLコーディング作業は、全く新規のサイトをイチから構築する作業ばかりではありません。今は多くのクライアントがすでにWEBサイトを持っており、リニューアルや一部コンテンツの改修として作業を行わなければならないシチュエーションの方が多かったりします。

そんなとき、既存のCSSやHTMLファイルを活用しながら新しいコードを書いていく必要があったりして、これが簡単なようで結構難しい。
何も考えずにただデザインどおりにコードを書いていけば、すでに存在している他のページに影響を与えてしまい表示が崩れる原因となってしまうため、既存サイトのコーディングには神経を使う必要があります。

CSSが破綻してしまう原因の一つとして、「なんだかうまく反映されないからとりあえず!importantを使う」といったような、CSSの基本的なルールを理解せずにコーディングを進めていくというものがあります。

そこで今回はスタイルシートの基本となる、「CSSの詳細度」についてまとめました。

CSSの詳細度とは

MDNのページによりますと、

詳細度(Specificity)は、どの CSS プロパティが要素に最も関係があるか、すなわち適用されるかをブラウザーが決定する手段です。詳細度は様々な組み合わせの CSS セレクターで構成される一致規則に基づいています。

詳細度 – CSS: カスケーディングスタイルシート | MDN

とあります。
つまりは「CSSセレクタの書き方による反映の強さ」というものでしょうか。

CSSの詳細度には序列があり、以下のとおりに規定されています。

CSSの詳細度(下に行くほど詳細度が低くなる)

  1. !importantの使用
  2. インライン要素(stye=“…”を使用)
  3. IDセレクタ(#)
  4. Classセレクタ(.)、属性セレクタ([type=”radio”]など)、疑似クラス(:hover など)
  5. 要素セレクタ(h1 など)
  6. ユニバーサルセレクタ(*)

このようにCSSでは反映される強さ、序列が決まっているので、
例えば同じH2要素にIDとClassが設定され、それぞれに同じプロパティの設定が存在していると、上記のルールに則って「IDに設定されているプロパティ」の方が反映されてしまうんですねー!

このように、CSSの詳細度を知っておけば「反映されないから!importantに逃げる」ということが少しでも減るのではないでしょうか。

CSS詳細度を手軽に計算して見える化できるツール「Specificity Calculator」

CSSの詳細度の基本的な知識はわかったけど、実際はいろんなセレクタを組み合わせてコーディングすることがほとんどなので、「このスタイルとこのスタイル、どっちが詳細度高いのかわからん」ってことが多いかと思います。
詳細度の計算についてはちょっと面倒なのですが、「Specificity Calculator」というツールを使って詳細度を見える化することが可能です。

Specificity Calculator

詳細度の計算は合算方式ではなく、各単位で点数が多いほうが優先度が上になります。

試しに同じ要素にIDとクラスをそれぞれ設定してみたところ、IDの場合は「1.0.3」クラスの場合は「0.1.3」となり、IDをつけたほうが詳細度が高くなりました。
このようにCSSは詳細度が数値化して細かく決まっているので、作業中「CSSが反映されないなぁ・・・」と悩んだときは、一度確認してみるのも良いと思います。

!importantはどんな場合にもスタイルを優先させる魔法の言葉ですが、後に破綻を招きかねない諸刃の剣でもあります。CSSの基本を抑えて、スマートでメンテナンスのしやすいコードを設計を心がけたいものです。

今日はこの辺で!