【テクニカル・上級編】 :where() 擬似クラス – CSS実践ガイド

CSSの「詳細度」という呪縛から解き放たれる：`:where()` がもたらすアーキテクチャの静かな革命

CSSを書くとき、我々は常に「詳細度（Specificity）の戦い」に身を投じている。IDセレクタが混入すればその瞬間にカスケードは脆くなり、`!important`が飛び交うスパゲッティコードが完成する。

かつて我々は、BEMやCSS Modulesといった命名規則でこの詳細度の暴走を力技でねじ伏せてきた。しかし、モダンCSSには、この構造そのものを無効化する強力な武器が存在する。それが `:where()` 擬似クラスだ。

単なる「セレクタのグループ化」だと高を括っているなら、それは大きな誤解だ。ブラウザのレンダリングエンジンと詳細度の計算ロジックを理解する我々にとって、`:where()` は、堅牢なCSSアーキテクチャを構築するための「切り札」となる。

`:where()` の本質：詳細度0という特異点

`:where()` の最大の特徴は、「引数に指定されたセレクタの詳細度を一切加算しない」という点にある。通常、セレクタをグループ化する `:is()` と比較されることが多いが、この両者の決定的な違いは「詳細度を継承するか否か」に尽きる。

/ :is() は、最も詳細度が高いセレクタの詳細度を採用する /
:is(#header, .nav) { color: red; }
/ この場合、IDセレクタを持つため、全体としてIDの詳細度を持つ /

/ :where() は、常に詳細度が0 /
:where(#header, .nav) { color: blue; }
/ どれだけ強力なIDを突っ込んでも、詳細度は0。つまり、後続のクラスひとつで簡単に上書きできる /

この「詳細度0」という特性は、設計思想に劇的な変化をもたらす。特に「リセットCSS」や「UIコンポーネントライブラリ」の設計において、これを使わない手はない。

なぜ「詳細度0」が大規模開発で必須なのか

大規模なアプリケーションにおいて、最も恐ろしいのは「意図しない上書きによる予期せぬ挙動」だ。

従来のCSS設計では、ライブラリのスタイルを上書きするために「ライブラリのセレクタよりも詳細度を高くする」必要があった。これによって、詳細度競争が加速し、結果としてCSSの保守性が指数関数的に低下する。

`:where()` を活用すれば、「デフォルトスタイルは常に最弱である」というルールを強制できる。

実践的なアーキテクチャ：ベーススタイルの分離

リセットCSSやベーススタイルで積極的に :where() を使う。
これにより、ユーザーが定義するスタイルが常に優先されるため、
「なぜかスタイルが当たらない」というCSS特有の不毛なデバッグ時間がゼロになる。

/
:where(h1, h2, h3, h4) {
margin: 0;
font-weight: bold;
line-height: 1.2;
}

:where(a) {
text-decoration: none;
color: inherit;
}

このアプローチを取ることで、開発者は「ベーススタイルに詳細度を奪われる心配」をせずに、自由にコンポーネントを構築できる。これは、エンジニアのメンタルモデルとCSSの挙動を一致させる、非常にエレガントな設計だ。

パフォーマンスとブラウザエンジンの挙動

「`:where()` を使うとレンダリング負荷が増えるのではないか？」と懸念する声を聞くことがあるが、答えはNOだ。

ブラウザのスタイルエンジン（BlinkやWebKitなど）において、`:where()` の解析は非常に効率的だ。セレクタがパースされた時点で詳細度が確定するため、CSSOMの再計算や再レイアウト時のコストを抑えられる可能性がある。特に、複雑なネスト構造を `:where()` でフラット化できる場合、セレクタマッチングのメモリ消費量や探索速度において有利に働く。

注意点：非同期読み込みとカスケードの競合

ただし、銀の弾丸など存在しない。`:where()` を過信しすぎると、逆に「どこでスタイルが定義されているか追いづらい」という副作用を生む可能性がある。

特に非同期で読み込まれるスタイルシートや、CSS-in-JSと併用する場合、`:where()` の詳細度0特性が「あまりにも弱すぎる」ために、スタイルが適用されないバグを生むリスクがある。

鉄則:

デフォルト・リセット系: `:where()` を使い、詳細度を極限まで下げる。
コンポーネントのコアスタイル: 意図的に詳細度を制御したい場合は `:where()` を避け、あえて詳細度を確保する。

結論：CSSの主導権を取り戻せ

`:where()` は、CSSの「カスケード」という原始的な仕組みを、現代のコンポーネントベースの設計に適合させるためのブリッジだ。

詳細度という「CSSの幽霊」に振り回されるのは、もう終わりにしよう。`:where()` を駆使して、あえて詳細度を「捨てる」勇気を持つこと。それが、数年後も崩壊しない、堅牢でスケーラブルなフロントエンドを構築するための第一歩だ。

コードは、読まれるためにあり、そして何より、後から来るエンジニアが「苦労せずに上書きできる」ように書かれるべきだ。`:where()` は、そのための最も知的な手段の一つであることに疑いはない。