CSSフレームワークを使おう

■第26話：importantを使わずにCSSを反映しよう

（最終更新日：2023.08.10）

CSSが効かない

CSSはセレクタの優先度や詳細度によって、設定したプロパティの値を反映している。 そのため、適切にCSSの優先度を考慮して記述しないと、指定をしてもうまく反映されない。 反映されないからと言ってimportantを使って無理に反映させると、その指定が最優先になるので、他の優先度を無視することになり、悪影響を及ぼすことがある。 今回はそんなCSSの優先順位の煩わしさを解決できる方法を紹介する。 ユーザーが意図的に優先度を決め、CSSを反映させることができる方法、それがCascade Layersだ。

１.CSSの優先度

CSSのスタイルを反映する優先順位に、セレクタ自体の詳細度というものがある。 要素よりもclassが優先、classよりもidが優先、idよりもstyleで直接指定する場合が優先という順番である。

また、CSSでの記述した詳細さも影響する。例えば下記の例の場合、testクラスの中のsummary要素をaquamarineにするCSSと、 testクラスのbackground-colorをlightgrayに指定するCSSでは、summaryがある方が優先されsummary要素内では青が表示される。 より、詳細な指定が優先されるということだ。

下記ではコードの詳細さにより、summaryの部分がaquamarineに反映され、p要素はlightgrayが反映されている。

CSS、HTMLを反映したもの

他にも、先に書いたものより後に書いたものが優先されるというものもある。上書きのように思ってくれれば良い。 セレクタの詳細度、記述の詳細度が同じで同じプロパティを指定した場合は後に書いたものが優先される。

importantを除くとCSSの優先度はこの3点となる。まとめると以下の通りとなる。

Web制作において、CSSの再利用性を高めていったときに、この部分を意識しないと設定した値が反映されなくてハマることが多い。 かなり重要なことなので、是非、覚えておこう。

２.Cascade Layersの使い方

上記のようなルールを覚えておけば、確かに自分の考えた通りにCSSを反映することはできる。 ただし、CSSの記述量が多くなってくると、中々整理するのも難しくなる。既存のclassとの兼ね合いもある。 反映させたいものが、以前のCSSにより反映できなくなるということが出てくる。 こんな困った状況を解決するのがCascade Layersである。

Cascade Layersは上記のような既存ルールに沿うのではなく、自分で優先順位をあらかじめ定義することができる。 書き方は、単純だ。最初に優先順位づけしたいlayer名を記述する。この際、後ろに書いた方のlayerの優先順位が高くなるので注意しよう。 あとは@layerで区括ってCSSを記述する。これだけである。下記は、second-styleよりfirst-styleを優先した例である。 基本はfirst-styleのCSSが優先して適用されるが、記述のないfont-styleだけsecond-styleが適用されている。

３.まとめ

今回、CSSの優先度とCascade Layersの使い方について説明した。 普段のCSSでは、まずはCSSの特徴とも言える3つの優先度を頭に入れた上で、コードを書くようにしよう。 そして、明示的に優先順位を書きたい場合はCascade Layersを使おう。 優先順位を定義することでどれを優先させたいかが、書いた人、読んだ人ともに分かりやすくなる。 CSSを幾つか組み合わせる部分で効果を発揮するだろう。ぜひ、活用してみよう。

▼参考図書、サイト

  !importantはもう使わない！CSSの優先順位をおさらいしよう　　Allied Architect CREATOR BLOG
  【CSS】カスケードレイヤーの使い方 - @layer　　qiita
  CSSのカスケードレイヤー「@layer」を使ったスタイルの定義とレイヤー管理　　Free Style