やあ。今日もCSSと格闘しているかな？
フロントエンド開発の現場で「なぜかスタイルが当たらない」「意図した見た目にならない」という現象に遭遇したとき、多くのエンジニアはまずデベロッパーツールを開いて、打ち消されているプロパティを眺める。そして、焦って`!important`を書き込む……。
もし君がまだその段階なら、今日で卒業しよう。CSSの「詳細度（Specificity）」は、魔法でも運でもない。ブラウザが裏側で淡々と計算している、極めて論理的な「重み付け」のルールなんだ。これを理解すれば、CSS設計は劇的に安定し、コードの寿命も延びる。
今日は、その泥臭い仕組みを徹底的に解剖していくぞ。
—
1. 詳細度という名の「重み付け」ルール
ブラウザはCSSを読み込む際、セレクタを解析して「どれが一番偉いか」を数値化している。このスコアが高い方が、同じプロパティに対して勝利する仕組みだ。
一般的に、詳細度は (a, b, c) という3つのランクでカウントされる。（※厳密には4つのランクがあるが、まずはこの3つを叩き込むことだ）
1. IDセレクタ (a): ` #header ` など。圧倒的な強さを持つ。
2. クラス・属性・疑似クラスセレクタ (b): ` .card `, ` [type=”text”] `, ` :hover ` など。
3. タグ・疑似要素セレクタ (c): ` div `, ` p `, ` ::before ` など。
計算の具体例
例えば、以下のセレクタを見てくれ。
- `div.container #main`
- ID(1), クラス(1), タグ(1) → 詳細度: (1, 1, 1)
- `.card .title`
- ID(0), クラス(2), タグ(0) → 詳細度: (0, 2, 0)
これらを比較すると、(1, 1, 1)の方が圧倒的に強い。`0`がいくつ並ぼうと、左の桁が1つでも大きい方が勝つ。これがCSSの絶対的な掟だ。
—
2. なぜ「詳細度」を意識すべきなのか
多くの現場で起きる不幸は、詳細度を意識せずに「クラスを重ねれば何とかなるだろう」と安易にセレクタを長くすることから始まる。
例えば、`#app .wrapper .inner .content .button { … }` なんていうセレクタを書いてしまうと、後から「このボタン、別の場所では色を変えたいな」と思ったときに、同じかそれ以上に強いセレクタを書かなければならなくなる。これが「詳細度のインフレ」だ。
結果として、コードの負債が積み上がり、誰も修正できない「触るのが怖いCSS」が出来上がる。
—
3. 実践：詳細度をコントロールするサンプルコード
現場で意識すべきは、「詳細度は可能な限り低く保つ」ことだ。クラス1つでスタイルを当てられるなら、それが一番美しい。
/ ❌ NG例：詳細度が高い。再利用性が最悪。 /
main-content .sidebar .nav-list li a {
color: red;
}
/ ✅ OK例：詳細度(0, 1, 0)でシンプルに。これならどこでも上書き可能。 /
.nav-link {
color: red;
}
/ 応用：状態変化もクラスで管理（BEM等の設計思想の恩恵） /
.nav-link–active {
color: blue; / クラス2つ分(0, 2, 0)なので、基本のスタイルより優先される /
}
—
4. プロのTips：詳細度のバグを回避する現場の知恵
実務では、以下のルールをチームの指針にすることをおすすめする。
- IDセレクタをCSSで使わない: IDはJavaScriptの操作やアンカーリンクのために取っておこう。IDをCSSに混ぜると詳細度が跳ね上がり、制御不能になる。
- `!important`は「敗北の証」: `!important`を使わないとスタイルが当たらないのは、詳細度設計が破綻している証拠だ。本当に最終手段（ライブラリの上書きなど）以外では禁じ手としよう。
- 詳細度をフラットにする: 基本は`.class`だけで戦う。どうしてもの時だけ`.parent .child`と繋げる。これだけで、CSSの競合は劇的に減る。
—
最後に
詳細度の計算は、ブラウザというエンジンの裏側を覗き込むようなものだ。このルールを知るだけで、君の書くコードは「動けばいい」というレベルから、「保守性が高く、予測可能な」プロのコードに変わる。
CSSは、書くのは簡単だが、美しく保つのは難しい。だからこそ、この「重み」の感覚を身体に染み込ませてほしい。
さて、次は君のプロジェクトのCSSを眺めてみてくれ。詳細度(1, 0, 0)や(0, 5, 2)みたいな、無駄に強いセレクタが潜んでいないか？ もし見つけたら、それが君のコードを少しずつ蝕んでいる原因かもしれないぞ。
また何か壁にぶつかったら、いつでも聞きに来るといい。応援しているぞ。
コメント