CSSの「優先順位」を支配する：コンテナクエリ時代のスタイリング戦略
現場で戦っている諸君、お疲れ様。
CSSの優先順位（カスケード）については、もはや「詳細度（Specificity）を制する者がCSSを制する」と叩き込まれてきたはずだ。しかし、`@container`という強力な武器が標準化された今、この「詳細度のルール」に少しばかりの“泥臭い調整”が必要になってきている。
今日は、メディアクエリとコンテナクエリが混在するカオスな戦場で、君たちが迷子にならないための「優先順位の真実」を紐解いていこう。
—
1. 「詳細度」の壁を突き抜けるコンテナクエリの正体
まず前提として、ブラウザがCSSを解釈する際、`@media`も`@container`も、「詳細度（セレクタの強さ）」の判定には一切関与しないということを再確認しておこう。
ブラウザの裏側では、以下のような順番で勝者が決まる。
1. カスケード順位: `!important`がついていれば問答無用で最強。
2. 詳細度（Specificity）: ID > クラス > 要素の順に重い。
3. 出現順序: 詳細度が同じなら、最後に書かれたやつが勝つ。
ここで重要なのは、「コンテナクエリはCSSのブロックを切り替えるだけであり、その中のセレクタの詳細度を底上げするわけではない」ということだ。つまり、コンテナクエリの中に書いたスタイルであっても、通常の外側のスタイルと同じ土俵で「詳細度」を競うことになる。
2. なぜコンテナクエリが「後出しジャンケン」で負けるのか
現場でよくある事故がこれだ。
/ 外側のスタイル /
.card .title { font-size: 16px; }
/ コンテナクエリ内のスタイル /
@container (min-width: 400px) {
.card .title { font-size: 20px; }
}
この場合、`@container`の中身と外側のスタイルは、詳細度が完全に同じ（`.card .title`）だ。ここで、もし君がCSSの読み込み順を間違えて、コンテナクエリの定義を外側のスタイルよりも上（前）に書いてしまったらどうなるか。
そう、ブラウザは「後から読み込まれたスタイル」を優先するため、コンテナクエリの条件を満たしていても、外側のCSSに上書きされてスタイルが反映されないという「謎の現象」に頭を抱えることになる。
現場の鉄則: コンテナクエリは、常に「詳細度が同じなら、後で書いたほうが勝つ」という鉄則を意識して、ファイルの下部や、適切なインポート順で管理せよ。
—
3. 実践：コンテナクエリ時代のスマートな記述例
では、現場でどう書くのがベストか。個人的には、「コンポーネント単位のクエリ」をそのコンポーネントの定義直下に置くのが最も保守性が高い。
/ コンポーネントの基本設計 /
.product-card {
container-type: inline-size; / コンテナ化する /
container-name: product; / 名前をつけておくのが吉 /
padding: 16px;
}
.product-card__title {
font-size: 1rem; / デフォルト /
}
/
- コンテナクエリはコンポーネントの直下に置く。
- これにより「このコンテナがどれくらいの広さの時にどうなるか」が明確になる。
/
@container product (min-width: 300px) {
.product-card__title {
font-size: 1.5rem; / 余裕があるなら大きくする /
}
}
4. どうしても勝てない時の「奥の手」：最終防衛線
実務をしていると、どうしても「外部ライブラリのスタイルが強すぎる」「詳細度を上げる設計になっていない」という地獄に出くわすことがある。その時は、`!important`を使う前に、以下の順序で解決策を模索してほしい。
1. 詳細度を上げる: 親セレクタを一つ足す（例: `.card .title` -> `.wrapper .card .title`）。
2. CSSレイヤー（@layer）を使う: 最近のモダンブラウザなら、`@layer`で優先順位を制御するのが最もプロフェッショナルな解決策だ。
3. !important（最終手段）: どうしても、本当にどうしようもない時だけ使え。ただし、コードのどこかに「なぜここに使ったのか」をコメントとして残すこと。未来の自分への戒めだ。
最後に：シニアからのアドバイス
「コンテナクエリ」は、単なるメディアクエリの代替品ではない。コンポーネントが自分自身の環境（親要素）を知り、自律的に振る舞うための「自己完結型UI」を実現する鍵だ。
CSSは、書けば書くほど負債になりやすいコードだ。だが、詳細度を理解し、コンテナクエリでコンポーネントを独立させれば、複雑なUIも驚くほどシンプルに管理できる。
さあ、エディタを開いて、君のCSSを「勝てるコード」へと書き換えてみてくれ。健闘を祈る。
コメント