CSSの「ワイルドカード」とどう付き合うか：ユニバーサルセレクタ “ の正しき使い道
フロントエンド開発の現場で、CSSを書き始めた頃に誰もが一度は通る道、それがユニバーサルセレクタ “ です。
「とりあえず全要素をリセットしておけば安心」という感覚で、思考停止して ` { margin: 0; }` と書いてきた人も多いでしょう。しかし、CSSが大規模化し、コンポーネント指向が当たり前になった今、この「何でも屋」のセレクタをどう扱うかは、あなたのCSS設計の力量が問われるポイントでもあります。
今日は、この “ の仕様上の特性から、ブラウザの裏側で起きていること、そして現場で「プロ」として採用すべきアプローチについて、少し掘り下げて話をしましょう。
—
1. なぜブラウザは “ を「重い」と判断するのか
まず、エンジニアとして理解しておくべきは「ブラウザの解釈」です。CSSセレクタは、実は右から左へ解析されます。
例えば `div > p ` と書いた場合、ブラウザはまず “（すべての要素）を探し、その親が `p` か？その親が `div` か？と遡っていきます。ユニバーサルセレクタは名前の通り「すべての要素」にマッチするため、複雑なセレクタチェーンの中に混じると、ブラウザのレンダリングエンジンは「対象となりうる要素」を広範囲に探索しなければなりません。
現代のブラウザは非常に高速ですが、DOMツリーが数千、数万と膨らむ巨大なアプリケーションにおいて、不用意な “ の乱用は、スタイルの再計算（Recalculate Style）のコストを微妙に、しかし確実に押し上げます。
2. 実務で「これだけはやってはいけない」こと
よく見かけるアンチパターンがこれです。
/ 悪い例：パフォーマンスへの配慮がない /
- {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif; / 全要素に継承させようとするのは悪手 /
}
なぜこれがダメなのか。
1. 継承の無駄遣い: `font-family` は継承プロパティです。`body` に設定すれば済む話を、わざわざ全要素に対して個別に適用させる必要はありません。
2. 重みの均一化: 全要素の余白を無理やり消すと、ブラウザ標準のUAスタイルシート（`h1`や`li`などが持つデフォルト値）を打ち消すために、後から過剰なオーバーライドが必要になり、CSSのカスケーディングがスパゲッティ化します。
3. 「プロの現場」で採用されているベストプラクティス
では、どう書くのが正解か。現場で愛用されているのは、`box-sizing` の強制適用と、擬似要素まで含めた確実なリセットです。
推奨される実装例
/
- 1. box-sizingをborder-boxに統一するのは現代の鉄則
- 2. 擬似要素（::before, ::after）も対象に含めるのがプロの作法
/
, ::before, ::after {
box-sizing: border-box;
}
/
- マージンリセットは「必要な箇所」に限定するのが美しいCSSの第一歩。
- すべてを消すのではなく、特定の要素のみを狙い撃つことで、
- コンポーネント間の疎結合を保ちます。
/
body, h1, h2, p, ul, ol {
margin: 0;
padding: 0;
}
なぜ `::before, ::after` を含めるのか？
実務で一番ハマりやすいのが、「あれ、paddingを入れたのにレイアウトが崩れる？」という現象です。これは、擬似要素に `box-sizing: border-box` が適用されていないために発生することが非常に多い。この一行を足すだけで、デバッグの時間を大幅に削減できるはずです。
4. 最後に：CSSは「引き算」の美学
CSSアーキテクトとして皆さんに伝えたいのは、「何にでも適用できる」は「何も適用しない方がいい」と裏返しであるということです。
ユニバーサルセレクタは非常に強力な武器です。しかし、乱用すればするほど、後からスタイルを上書きするための詳細度（Specificity）の戦いに追われることになります。
- リセット以外の目的で “ を使っていないか？
- 継承プロパティをわざわざ “ で指定していないか？
この2点を自問自答するだけで、あなたの書くCSSはぐっと洗練され、チームメンバーからも「この人のコードは読みやすい」と信頼されるはずです。
CSSは、書く量よりも「いかに書かないか」で勝負する世界です。“ を賢く使いこなし、クリーンで堅牢なスタイルシートを構築していきましょう。健闘を祈ります。
コメント