現場で戦うエンジニア諸君、お疲れ様。
CSSの「読み込み順序」で沼にハマった経験、一度はあるだろう？
「CSSが当たらない」「意図したスタイルが上書きされる」。そんな時、詳細度（Specificity）だけを必死に追いかけて `!important` の海に溺れるのは、もう終わりにしよう。
今日は、ブラウザが裏側でどうやってCSSを解釈し、レンダリングしているのか。特に `link` タグと `@import` が織りなす「読み込みの序列」という、実務の死角になりやすい部分を深掘りしていく。ここを理解すれば、君のCSS管理は劇的にクリーンになるはずだ。
—
1. ブラウザの「裏側」で起きていること
まず前提を叩き込んでおこう。ブラウザはHTMLを上から順にパースしていく。そこで `link` タグを見つければ、その場でCSSのダウンロードを開始する。
問題は `@import` だ。こいつは「CSSファイルの中身を読み込んでから、初めてその中にある `@import` に気づく」という性質がある。つまり、CSSのダウンロードが完了するまで、さらにその先のCSSの存在を知ることができない。
これが何を意味するか？ 「レンダリングの遅延」であり、「スタイル適用の不安定化」だ。
なぜ `@import` が嫌われるのか
実務において `@import` を避けるべき最大の理由は、「クリティカルパス（表示の高速化）」を阻害するからだ。メインのCSSファイルが読み込まれた後に、さらに別のファイルを読み込みに行く。これにより、ブラウザの並列ダウンロードの恩恵をフルに受けられず、画面がチラつく（FOUC: Flash of Unstyled Content）原因になる。
—
2. 読み込み優先順位の「鉄則」
CSSの優先順位は、大きく分けて以下のルールで決まる。
1. 読み込まれた順番（後勝ち）
2. 詳細度（ID > Class > Element）
3. `!important`（最終奥義）
ここで重要なのは、「HTML内でlinkタグが記述された順番」と「CSSファイル内で@importが書かれた順番」の組み合わせだ。
もし `main.css` の先頭に `@import “theme.css”;` があったら、優先順位は `reset.css` < `theme.css` < `main.css` の順になる。なぜなら、ブラウザは読み込んだ順番にスタイルをスタックしていくからだ。 ---
3. 実践：現場でやるべき「綺麗な書き方」
僕が現場で必ずメンバーに守らせているのは、「HTML側で全て管理する」というルールだ。CSSファイルの中に `@import` を書くのは、極力避ける。
推奨される構成（HTML管理）
どうしても `@import` を使う場合の「お作法」
もしCSSのモジュール化のために `@import` を使うなら、ファイルの先頭に記述すること。これはCSSの仕様（CSSOM）で必須とされているからだ。途中に書くとブラウザは無視したり、予期せぬ挙動を起こしたりする。
/ style.css /
/ 1. 必ず先頭に書くこと。これより後に書かれたスタイルが優先される /
@import url(“variables.css”);
@import url(“components/buttons.css”);
/ 2. その後に通常のCSSを記述する /
body {
background: var(–bg-color);
}
—
4. チーフからのアドバイス：`!important` との付き合い方
最後に、`!important` について。
「ここぞという時」以外、使うな。特にCSSの読み込み順序を整理すれば、ほとんどのケースで `!important` は不要になる。
もし君が「スタイルが当たらないから」という理由で `!important` を乱発しているなら、それはCSSの設計（アーキテクチャ）が破綻しているサインだ。読み込み順序を整理し、クラスの命名規則（BEMなど）を徹底するだけで、CSSは驚くほど素直に動いてくれる。
—
まとめ：今日の持ち帰り
1. `@import` は悪ではないが、パフォーマンスの敵である。 可能な限り `link` タグでHTML側に集約せよ。
2. 読み込み順は「後勝ち」。 汎用的なものは上、固有のものは下に記述する。
3. `!important` は最後の手段。 順序と詳細度を制御できれば、それは「敗北」ではなく「勝利」だ。
CSSは、ただの「見た目を整えるツール」じゃない。ブラウザというエンジンをどう制御するかという、立派なプログラミングだ。明日の朝、君が書くコードが、昨日より少しだけ洗練されていることを期待している。
また現場で会おう。健闘を祈る！
コメント