このレッスンをすべて読み終えると、以下の3つを自信を持って実行できるようになります。

• ▸✅ 詳細度の4桁スコア (inline > id > class > tag) の計算
• ▸✅ !important が最後の手段である理由の説明
• ▸✅ BEM規約による詳細度の平坦化

これらの目標をチェックリストとして意識し、すべて答えられるようになったらレッスンを閉じてください。

一言まとめ

複数のCSSルールが同じ要素に適用される場合、詳細度 (Specificity) が高いルールが勝ちます。同点の場合は後に書かれたルールが勝ちます。

スコアの計算

各セレクタには4桁の数字のスコアが割り当てられます:

セレクタ                     スコア (a,b,c,d)
─────────────────────────────────
* (全称)                     0,0,0,0
タグ・疑似要素               0,0,0,1
クラス・疑似クラス・属性     0,0,1,0
ID                          0,1,0,0
inline style                1,0,0,0
!important                  (特殊、すべてを無視)

例:

• ▸p → 0,0,0,1
• ▸.card → 0,0,1,0
• ▸.card p → 0,0,1,1
• ▸#main .card p → 0,1,1,1
• ▸<p style="..."> → 1,0,0,0
• ▸... !important → 無条件で勝ち

よくある衝突

<button class="btn btn-primary" id="submit">送信</button>

.btn { background: gray; }            /* 0,0,1,0 */
.btn-primary { background: blue; }    /* 0,0,1,0 — 同スコアだが後に記述 → 勝ち */
button { background: white; }         /* 0,0,0,1 — 負け */
#submit { background: red; }          /* 0,1,0,0 — 最強 → 勝ち */

IDが最も強いため、IDでスタイルを指定すると後から上書きできない罠にはまります。

!important — 最後の手段

.urgent { color: red !important; }

他のすべてのルールを無視します。強力ですが乱用禁止。一度使うと、他の箇所でも!importantが増殖し、最終的には!important同士の衝突という地獄に陥ります。

使ってよい場面:

• ▸外部ライブラリのスタイルを強制的に上書きする場合
• ▸ユーティリティクラス (Tailwindなど)
• ▸それ以外は詳細度で解決してください

優先順位のまとめ

高い順:
1. !important (特殊)
2. inline style (style="...")
3. IDセレクタ
4. クラス・疑似クラス・属性
5. タグ・疑似要素
6. 全称 (*)

同スコアの場合は後に書かれたルールが勝ちます。

まとめ

詳細度とは衝突時にどちらが勝つかのルールです。クラスのみを使用するとほぼフラットな詳細度になり、衝突が減ります。IDや!importantの乱用は保守の地獄を招きます。

このレッスンの概念を理解すれば、AIに具体的に指示できるようになります。漠然とした「直して」ではなく、語彙を持ったリクエスト — それがトークン節約の出発点です。

• ▸「このHTML/CSSに 詳細度 — どちらが勝つか の概念を適用してリファクタリングして」
• ▸「詳細度 — どちらが勝つか に関連したアクセシビリティ・SEOのチェックをして」
• ▸「Tailwindクラスで同じ結果を作って」

なぜトークンが減るのか

概念を知らないままAIの回答を受け取っても、「それは何ですか?」と再度聞く必要があります。その「再質問」がトークンを消費します。概念を一度学んでおけば、会話が一回で完結します。