CSS詳細度（Specificity）の「闇」を支配せよ：現場で生き残るための計算学
やあ、フロントエンドの戦場へようこそ。
君も経験があるだろう？「なぜかこのスタイルが当たらない」「デベロッパーツールで打ち消し線だらけのスタイルを眺めて途方に暮れる」という、あの胃が痛くなる瞬間が。
CSSは一見すると「書いた順番通りに適用される」という単純なルールに見える。だが、実はその裏でブラウザは「詳細度（Specificity）」という、残酷なまでの階級社会を作り上げているんだ。今日は、この詳細度の正体を暴き、君がCSSの支配者として現場で立ち回れるように、深淵の先まで案内しよう。
—
1. 詳細度の「階級」：ブラウザの頭の中を覗く
まず、詳細度の概念を「CSSの強さのポイント」として捉えるのが一番早い。ブラウザはセレクタに出会うたびに、裏側で密かに数値を計算している。
詳細度は大きく分けて以下の4つの桁で構成される（左から強い順だ）。
1. インラインスタイル: `style=”…”` （圧倒的王者。これを使ったら負けだと思え）
2. IDセレクタ: `#header` など（100ポイント）
3. クラス・擬似クラス・属性セレクタ: `.btn`, `:hover`, `[type=”text”]` （10ポイント）
4. 要素（タグ）セレクタ: `div`, `p`, `section` （1ポイント）
なぜ「10進数」ではないのか？
よくある誤解だが、これは「10進数」ではない。例えば「クラスを10個並べればIDに勝てるか？」というと、勝てない。たとえクラスを100個並べようが、IDという「階級」には決して届かないんだ。これはブラウザが桁上がりをさせないルールになっているからだ。
—
2. 実戦：複雑なセレクタを計算してみよう
次のコードを見てくれ。現場でよくある、少し複雑なセレクタだ。
/
- 計算してみよう！
- 1. #nav .item:hover (ID=1, クラス=2, 要素=0) -> 詳細度: 1-2-0
- 2. nav ul li a (ID=0, クラス=0, 要素=4) -> 詳細度: 0-0-4
- 3. .header .nav .menu-item (ID=0, クラス=3, 要素=0) -> 詳細度: 0-3-0
/
/ どんなに要素セレクタを重ねても、クラスひとつに負ける /
nav ul li a {
color: #ccc;
}
/ だから、クラス単体の方が詳細度が高いのでこちらが優先される /
.menu-item {
color: #333;
}
この計算式を頭に入れておかないと、大規模なCSS設計をした時に「なぜかスタイルが上書きされない！」という地獄を見ることになる。
—
3. 実務で「戦わない」ための賢い戦略
ここからがシニアの知恵だ。詳細度の計算に頼り切る開発は、「詳細度ウォーズ（Specificity Wars）」を招く。IDを使いまくり、さらに詳細度を上げるために無理やり複雑なセレクタを書く…そんな悪循環は、コードをゴミ溜めにする一番の近道だ。
推奨する3つの黄金律
- IDセレクタは「CSS」に使わない: IDはJavaScriptのDOM操作やアンカーリンク専用と割り切るのが吉だ。CSSでIDを使うと、後から上書きするのが極めて困難になる。
- 「クラス」でフラットに戦う: 基本は `.card__title` のような単一クラスで勝負する。BEM（Block Element Modifier）の考え方をベースに、詳細度を常に `0-1-0` に固定する意識を持つんだ。
- `!important` は「最終兵器」: 実務で `!important` を乱用しているなら、それは設計の敗北だ。どうしてもライブラリのスタイルを上書きしなければならない時以外は、封印しておくのがプロのたしなみだ。
—
4. 今すぐエディタに貼って試せ！
最後に、詳細度の違いがどう適用されるかを確認するためのサンプルを用意した。ブラウザの検証ツールを開いて、色がどう変化するかを確かめてみてほしい。
この文字の色はどれになる？
—
最後に：CSSは「設計」で勝て
詳細度の計算をマスターすることは、CSSを書く上での基礎体力だ。しかし、最も優秀なアーキテクトは「詳細度の計算で戦う必要がないほど、綺麗でフラットな設計」を作り上げる。
「なぜこのセレクタなのか？」をチームの誰かに聞かれた時、「詳細度が高いから」と答えるのではなく、「このコンポーネントは独立しているべきだから、あえて単一クラスで管理している」と答えられるようになろう。
君のコードが、数ヶ月後の自分やチームメイトを救うことになると信じている。何か詰まったら、いつでも戻ってきてくれ。現場からは以上だ。
コメント