本文でだけハイパーリンク色を変更する手法

本文だけ、具体的には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の世界では、ここだけ別の思想に基づいて実装することになってしまう。すみ分けは、正しい手法ではあるものの、事実上、ああいったセレクターは保守できないだろう。カスタム・プロパティーでの切り替えは、よくあるダーク・モードへの適応手法と考え方は同じで、それを含めたデザイン・システムと管理手法が揃えられれば、多大な恩恵をもたらすはずだ。拡張性という観点でも申し分ない。