詳細度という「呪い」を解く：:where() がCSSアーキテクチャにもたらす革命
やあ。現場でCSSと格闘している君なら、一度はこんな経験があるはずだ。
「なぜかこのスタイルが上書きできない」「詳細度を上げるために、意味のないクラス名を重ね書きしている」。
CSSの記述場所や優先順位、いわゆる「詳細度（Specificity）」の計算に頭を悩ませ、最終手段として `!important` を乱用して後悔する……。これぞCSS中級者への登竜門であり、同時に多くのエンジニアが抱える「負債の正体」でもある。
今日は、そんな詳細度の呪いを根本から断ち切る強力な武器、`:where()` 擬似クラスについて話をしよう。これは単なる小技じゃない。CSSアーキテクチャのあり方を変える、極めて実務的な「賢い書き方」の話だ。
—
1. 詳細度を「無」に帰す `:where()` の魔力
通常、CSSセレクタの詳細度は、IDなら100、クラスなら10、要素（タグ）なら1という風に加算されていく。だが、`:where()` は違う。この擬似クラスの中に記述したセレクタは、詳細度が「0」になるんだ。
例えば、以下のコードを見てほしい。
/ 通常、IDで指定すると詳細度は100になる /
main-content p {
color: red;
}
/ :where()を使うと、中のセレクタが何であれ詳細度は0になる /
:where(#main-content) p {
color: blue;
}
この場合、結果は「青」になる。`#main-content` というIDを使っているにもかかわらず、`:where()` で括ることで、そのセレクタ自身の詳細度がゼロとして扱われる。これにより、後から書くクラスセレクタひとつで簡単にスタイルを上書きできるようになるんだ。
—
2. なぜこれが実務で「革命的」なのか？
君がもしリセットCSSや、汎用的なコンポーネントライブラリを設計しているなら、このメリットは計り知れない。
従来のCSS設計では、コンポーネントの「デフォルト値」を強く設定しすぎてしまい、ユーザーが後からスタイルを当てようとすると詳細度で負けてしまうという問題があった。いわゆる「強すぎるデフォルト」問題だ。
`:where()` を使えば、「デフォルトの見た目は担保しつつ、上書きは極めて容易にする」という、理想的なCSS設計が可能になる。
実践的な活用例：リセットCSSのモダンな書き方
例えば、以下のようにリセットCSSを組むと、現場のエンジニアから感謝されるはずだ。
/
リセットCSSなどでよく使われる設定。
従来だとタグ指定が詳細度を持ってしまい、上書きが面倒だった。
/
:where(ul, ol) {
padding: 0;
margin: 0;
list-style: none; / デフォルトの装飾を消す /
}
/
これなら、後からどんなクラスを当てても、
詳細度を気にせずシンプルにスタイルを記述できる。
/
.my-list {
list-style: disc; / 簡単に上書き成功 /
}
どうだい？ これまで `ul` タグに直接スタイルを当てて詳細度を稼いでいた時代とは、スマートさが段違いだろう。
—
3. 現場で使える「最強のパターン」
僕が現場でよく使うのは、ユーティリティクラスやコンポーネントのベース設定での活用だ。特にフレームワークを使っている際、ライブラリが生成するCSSの強さに負けないための「防御的コーディング」としても優秀だよ。
/
コンポーネントのベーススタイル。
:where()で囲むことで、ユーザー側のクラス指定を邪魔しない。
/
:where(.btn) {
display: inline-block;
padding: 0.5rem 1rem;
border: 1px solid #ccc;
border-radius: 4px;
}
/
後からどんなに単純なクラスで上書きしても、
詳細度がゼロなのでサクッと適用される。
!important を使う必要はもうない。
/
.btn-primary {
background: blue;
color: white;
}
—
4. プロの視点：注意点と使い分け
ただし、なんでもかんでも `:where()` に突っ込めばいいというわけじゃない。
- `:is()` との対比: `:is()` という擬似クラスもある。こちらは `:where()` と同じようにセレクタをまとめられるが、「詳細度が最も高いセレクタの値」を持つという違いがある。用途に合わせて使い分けるのがプロの流儀だ。
- ブラウザサポート: 今やモダンブラウザであればほぼすべて対応している。IEの呪縛から解き放たれた現代においては、迷わず採用していい技術だ。
—
最後に：CSSの「負債」を減らすために
CSSの難しさは、書き方ではなく「どう読み込まれ、どう重なるか」という計算にある。`!important` で強引にねじ伏せる手法は、いずれ君の首を絞めることになる。
`:where()` を活用することは、「未来の自分やチームメンバーが、コードを上書きしやすくするための配慮」だと言える。
まずは、今のプロジェクトのリセットCSSや、ベースとなるボタンコンポーネントのセレクタを一つ、`:where()` で囲むことから始めてみてほしい。その瞬間、詳細度の計算という呪いから解放された、軽やかな開発体験が待っているはずだ。
さあ、エディタを開いて、君のCSSをよりクリーンで、より愛されるものに変えていこうじゃないか。
コメント