本文だけ、具体的にはmain
要素以下でだけ、ハイパーリンクの色を変えたい、というようなことはよくあるだろう。色々なやり方がある。上書きするか、ハイパーリンクごとにクラスを振るのが主流と思われる。セレクターを工夫すれば、すみ分けることもできる。僕は、最近になって、カスタム・プロパティーで切り替える手法に落ち着きつつある。
上書きする
a {
color: red;
}
main a {
color: green;
}
普通の書き方はこうだろう。特に言うことはないが、上書きが入るので、よくわかっていない人にいじられると破綻しやすい。また、詳細度が違うので、そのことを意識しながらコードを把握しなくてはならない。
すみ分ける
body > :not(main) a {
color: red;
}
body > main a {
color: green;
}
とにかくCSSで上書きをしたくない書き方はこうなる。明確にすみ分けが行われているので、保守性は高い。例えば、よくわからずに!important
を使われても、効果はないからだ。詳細度も揃う。反面、セレクターがやたらと複雑になり、かつ構造に依存する。
カスタム・プロパティーで切り替える
:root {
--color-a: red;
}
main {
--color-a: green;
}
a {
color: var(--color-a);
}
カスタム・プロパティーを使うと、こうも書ける。ルールセットが増えているので、回り道をしているように見えるが、デザイン・トークンのような側面から考えると、意味がありそうに見えてくる。CSSコード自体はほとんどいじらずに、デザイン・トークンへの参照を切り替えるだけで済むからだ。詳細度の問題も起きない。
主流の手法で安定していると考えることもできるが、多くをカスタム・プロパティーを通して書くようになりつつあるCSSの世界では、ここだけ別の思想に基づいて実装することになってしまう。すみ分けは、正しい手法ではあるものの、事実上、ああいったセレクターは保守できないだろう。カスタム・プロパティーでの切り替えは、よくあるダーク・モードへの適応手法と考え方は同じで、それを含めたデザイン・システムと管理手法が揃えられれば、多大な恩恵をもたらすはずだ。拡張性という観点でも申し分ない。