【実務・中級編】プロパティの継承と詳細度 – CSS実践ガイド

現場でCSSを書いていると、一度は必ず遭遇する「あれ、スタイルが当たらないぞ？」という怪奇現象。
デベロッパーツールを開いて、打ち消し線だらけのスタイルシートを睨みつけ、結局 `!important` で強引にねじ伏せて解決した気分になっていないか？

もし心当たりがあるなら、それはCSSの「継承（Inheritance）」と「詳細度（Specificity）」という、CSSの根幹を成すルールを肌感覚で理解しきれていない証拠だ。

今日は、小手先のテクニックではなく、ブラウザが裏側でどうやってスタイルを決定しているのか、その「思考回路」を解き明かしていこう。

—

CSSのすべてのプロパティが親から子へ受け継がれるわけではない。ここを勘違いしていると、無駄なセレクタを量産する羽目になる。

継承されるプロパティ: `color`, `font-family`, `font-size`, `line-height`, `text-align` など。「文字やテキストの見た目」に関するものは、基本的に子要素へ伝播する。
継承されないプロパティ: `margin`, `padding`, `border`, `background`, `display` など。「ボックスモデルの構造や位置」に関するものは、親から継承されない。

ここがリアルな落とし穴だ：
`div`に背景色を指定しても、その中の`p`タグがその色を引き継ぐことはない（透明なまま）。逆に`body`に`color`を指定すれば、サイト全体の文字色が統一される。この「継承の境界線」を意識するだけで、無駄なクラス指定を大幅に削れるようになる。

—

CSSにおいて、同じ要素に複数のスタイルが競合した場合、ブラウザは「詳細度の高い方」を勝たせる。これは残酷なまでに論理的だ。

詳細度の計算式は、よく「(A, B, C)」という3つの桁で語られる。

1. A (IDセレクタ): `#header` など。最強。
2. B (クラス、属性、擬似クラス): `.card`, `[type=”text”]`, `:hover` など。
3. C (タグ、擬似要素): `div`, `p`, `::before` など。

現場の教訓:
IDセレクタ（`#`）をスタイル付けに使うのは絶対に避けるべきだ。一度IDでスタイルを当てると、詳細度が強すぎて後から上書きするのが極めて困難になる。「IDはJavaScriptのフック用、クラスはスタイル用」と割り切るのが、長く生き残るコードの鉄則だ。

—

以下のコードを見てほしい。なぜ `p` タグの文字色が `red` になるのか、その理由をコメントで解説した。

/ 1. 詳細度: (0, 0, 1) – タグセレクタ /
p {
color: blue;
}

/ 2. 詳細度: (0, 1, 0) – クラスセレクタ /
/ 1より詳細度が高いため、こちらの青ではなく赤が適用される /
.text-important {
color: red;
}

/ 3. ボックスモデルの継承テスト /
.container {
border: 1px solid black; / これは継承されない /
color: green; / これは継承される /
}

/ 子要素のpタグは、親のcontainerからcolor: greenを継承するが、
上の.text-importantクラスが当たっていれば、そちらが優先される /

—

ここまで理論を話したが、実務では詳細度を計算し続けるのは不毛だ。以下のプラクティスを意識してほしい。

詳細度をフラットに保つ: 基本的にクラスセレクタ一つ（`0, 1, 0`）だけでスタイルを当てる。`div .card .title` のように詳細度を積み上げるのは、負債の始まりだ。
継承を賢く使う: `body` や `html` に共通のフォント設定などを当てておき、CSS変数を活用してテーマカラーを管理する。
詳細度を競わせない: そもそも「セレクタの強さ」で勝負しなくていい設計を心がける。BEM（Block Element Modifier）のような命名規則を採用し、一貫したクラス名で制御するのが、結局は一番の近道だ。

CSSは「誰でも書ける」からこそ、中級者の段階で「正しく書ける」ようになるだけで、他のエンジニアから一目置かれるようになる。

「とりあえず動いた」で済ませるな。ブラウザが何を優先して、なぜその色になったのか、そのプロセスを常に想像してほしい。そうすれば、君が書くコードは、数年後もメンテナンス可能な「価値ある資産」になるはずだ。

さあ、エディタを開いて、君のコードを一段上のレベルへ引き上げよう。