メディアクエリとカスケードの「本当のルール」：詳細度よりも優先される「記述順」の罠
現場でCSSを書いていて、「なぜかメディアクエリの中のスタイルが当たらない」「`!important`を使っても勝てない」といったトラブルに遭遇したことはないだろうか。
多くのエンジニアが「詳細度（Specificity）」を正しく計算できればCSSは完勝できると信じている。しかし、メディアクエリが絡んだ瞬間に、その前提は脆くも崩れ去る。今日は、ブラウザが裏側でどうやってスタイルを決定しているのか、その「カスケードの真実」を紐解こう。
1. メディアクエリは「詳細度」を上げない
まず、絶対に勘違いしてはいけないのが「メディアクエリの記述自体には詳細度を上げる効果はない」ということだ。
例えば、`@media (min-width: 768px) { .box { color: red; } }` と書いても、単なる `.box { color: red; }` と詳細度は変わらない。ブラウザは、メディアクエリを「スタイルを適用するための条件分岐」と捉えており、セレクタの重み（ID、クラス、要素など）を比較するプロセスは、あくまでその条件を満たした後の世界で行われる。
つまり、メディアクエリの内側と外側で全く同じ詳細度のセレクタがぶつかった場合、最後に登場したほうが勝つという、CSSの最も根源的なルールが適用されるのだ。
2. 「ソース順」がすべてを支配する瞬間
CSSの優先順位決定アルゴリズムをシンプルに整理すると、以下の3ステップになる。
1. 重要度（Importance）: `!important` が付いているか。
2. 詳細度（Specificity）: ID > クラス > 要素の順。
3. ソース順（Source Order）: 最後に定義されたものが勝つ。
ここで罠になるのが、「メディアクエリの中にあるからといって、無条件で優先されるわけではない」という点だ。
以下のコードを見てほしい。
/ 1. 外側のスタイル /
.card {
background-color: blue;
}
/ 2. メディアクエリ内のスタイル /
@media (min-width: 768px) {
.card {
background-color: red;
}
}
/ 3. 外側のスタイル（メディアクエリの後） /
.card {
background-color: green;
}
この場合、ブラウザのウィンドウ幅が1000pxあっても、`.card` の背景色は `green` になる。メディアクエリ内にある `red` は、ソース順において `green` よりも前に書かれているため、負けるのだ。
3. 実務で「負けない」ためのベストプラクティス
現場でこの手のバグを起こさないために、以下の鉄則を頭に叩き込んでおいてほしい。
- モバイルファーストを徹底せよ:
ベースのスタイルをスマホ向けに書き、メディアクエリで「上書き」していく構成にすれば、ソース順による競合は自然と解消される。
- CSSの順序を管理せよ:
「ベース → コンポーネント → メディアクエリ」のようなレイヤー構造を維持すること。メディアクエリをバラバラな場所に書くと、何が勝つのか追跡不能になる。
実践的な構成例
/ 1. ベースのスタイル（モバイル向け） /
.button {
padding: 10px;
font-size: 14px;
}
/ 2. メディアクエリ（広い画面用の上書き） /
/ メディアクエリは一箇所にまとめるか、コンポーネントの直後に置く /
@media (min-width: 768px) {
.button {
font-size: 16px; / モバイルのスタイルを上書き /
}
}
/ 3. ユーティリティや修飾系（必要であれば） /
/ ここにメディアクエリより後に書くものは、本当に強い意志を持って記述すること /
.button–primary {
background-color: blue;
}
4. まとめ：ツールに頼らず「流れ」を読め
`!important` を多用して解決しようとするのは、言わば「デバッグの敗北」だ。メディアクエリとの競合に悩んだときは、ブラウザのデベロッパーツールで「どのファイルが、どの行で、上書きされているか」を見る前に、「自分が書いたコードの順番が、ブラウザの読み込み順と一致しているか」を疑ってみてほしい。
CSSは、一度書いたら終わりではない。ブラウザという名の巨大なエンジンが、あなたの書いたコードを上から下へ流し読みして描画している様子を、頭の中で想像できるようになれば、あなたは一人前のフロントエンドエンジニアだ。
もしメディアクエリの優先順位で迷ったら、「最後に書いた奴が勝つ」。この単純で残酷なルールを思い出してくれ。それだけで、ほとんどのCSS問題は解決するはずだ。
コメント