CSS詳細度ウォーズ — セレクターの優先順位の理解
CSS詳細度がどのスタイルが勝つかを決定する仕組みを理解します。詳細度の計算、競合の解決、!importantの回避方法を実践的な例で学びます。
Advanced Patterns
詳細な説明
CSS詳細度ウォーズ
複数のCSSルールが同じ要素をターゲットする場合、詳細度がどのルールが勝つかを決定します。詳細度の理解はスタイリング問題のデバッグと保守しやすいCSSの作成に不可欠です。
詳細度の階層
詳細度は3パートのベクトル**(a, b, c)**として計算されます：
| コンポーネント | 重み | 例 |
|---|---|---|
| a — IDセレクター | 最高 | #header、#nav |
| b — クラス、属性、疑似クラス | 中 | .nav、[type]、:hover |
| c — 要素、疑似要素 | 最低 | div、::before |
解決ルール
- より高い詳細度が常に勝つ（ソース順序に関係なく）
- 同じ詳細度？ソース順序で最後のルールが勝つ
- インラインスタイル(
style="")はすべてのセレクターに勝つ !importantはすべてに勝つ（インラインスタイルを含む）
詳細度問題の回避
- 推奨：フラットなクラスベースのセレクターを使用（
#nav > ul > liではなく.nav-item） - 推奨：BEM命名を使用（
.block__element--modifier） - 非推奨：3レベル以上の深さにセレクターをネストしない
- 非推奨：スタイリングにIDを使用しない
ユースケース
詳細度の理解はすべてのフロントエンド開発者にとって不可欠です。スタイルが期待通りに適用されない理由、サードパーティCSSのオーバーライドが難しい理由、BEMなどのCSSアーキテクチャが存在する理由を説明します。詳細度のデバッグは大規模なコードベース、コンポーネントライブラリ開発、複数のCSSソースの統合における日常的なタスクです。