やあ。CSSの海で溺れそうになっている若手エンジニア諸君、あるいは「なぜかスタイルが当たらない」というCSSの怪奇現象に夜な夜な頭を抱えているベテラン諸君。
今日は、CSSの「場所」と「優先順位」という、フロントエンド開発における最も基本的であり、かつ最も泥沼化しやすいテーマについて話をしよう。
「外部ファイルか、styleタグか、インラインか」。この選択を適当にやると、数ヶ月後の君自身が地獄を見ることになる。なぜブラウザがそのスタイルを選んだのか、その裏側にある「判定のルール」を腹落ちさせよう。
—
CSSが適用される3つの場所：その本質的な使い分け
CSSの記述場所は大きく分けて3つだ。教科書的な説明は省く。現場のリアルな運用視点で整理しよう。
1. 外部スタイルシート (``):
保守性の王様。キャッシュが効くし、複数ページで共有できる。これが基本だ。
2. 内部スタイルシート (`
この文字は何色になるか？
答え：IDが優先されるため「赤」だ。
---
禁断の果実：`!important` との付き合い方
`!important` を使うのは、「自分の書いたコードがどうしても既存のクソコード（あるいは巨大なライブラリ）に勝てない時の最終手段」だ。
現場で `!important` を使うときは、必ずその理由をコメントに残せ。後からコードを見た人間が「なぜこれを強引に上書きしたのか」を理解できるようにするためだ。
/ 良い例：外部ライブラリの強制的なスタイルを打ち消す場合 /
.modal-overlay {
display: block !important; / なぜならライブラリ側でインラインが強制付与されているから /
}
/ 悪い例：楽をするために使うな /
.my-button {
color: red !important; / 絶対にやるな。負債になるぞ。 /
}
---
シニアからの提言：クリーンなCSSを書くために
結局のところ、優先順位で悩むような設計自体が「負け」なんだ。
- CSSの優先順位を上げようとするな： クラス名一つで制御できる「フラットな詳細度」を保て。BEM（Block Element Modifier）のような手法を取り入れ、セレクタを深掘りする（ネストを深くする）のをやめよう。
- ソースコードの順序を意識せよ： 詳細度が同じなら、後に書いたものが勝つ。共通スタイルは先に、上書きスタイルは後に書くのが鉄則だ。
- CSS変数を活用せよ： `!important` で強引に色を変えるくらいなら、CSS変数（`--main-color`）を定義して、それを差し替える方が遥かに現代的でスマートだ。
CSSは、一度書き始めると修正コストが指数関数的に増える技術だ。
「どこに書くか」「なぜそのセレクタを選んだか」を説明できないコードは、絶対にコミットしてはいけない。
いいか、スタイルは「書く」のではなく「管理する」ものだ。明日からのコーディングで、一つ上の視点を持って向き合ってみてほしい。期待しているぞ。
コメント