小さい頃はエラ呼吸

いつのまにやら肺で呼吸をしています。


ユニバーサルセレクタを使う前に学ぶ基礎知識

はじめに

スタイルシートでページ内の全要素に対して同じスタイルを適用させたい場合、ユニバーサルセレクタ(全称セレクタ)という手法を用いることができます。
このユニバーサルセレクタは、ブラウザごとのレンダリングの違いを埋めるためにmarginやpaddingを一律でリセットしてしまう手法(CSSリセット)で用いられます。

CSS を作成している際に、当然の如くブラウザによって描画結果に違いが出てくるわけで、ムキーとか言いながらその差異を埋めていく作業が一番面倒っちゃあ面倒。んで、ボックスモデルやその他ブラウザごとのバグ以外で、極力そう言った差異を少なくするためには、一番最初に全称セレクタを使ってブラウザのデフォルトスタイルを消してしまうのが手っ取り早い。
CSS を作成する際のお約束 - lucky bag はてなブックマーク - CSS を作成する際のお約束 - lucky bag

ユニバーサルセレクタを使用したCSSリセットの例

以下のようにアスタリスクで指定することで、HTMLの全要素に対して、同じスタイルを適用することができます。

 * {
   margin: 0;
   padding: 0;
   font-style: normal;
   font-weight: normal;
 }
ユニバーサルセレクタの弊害

一見便利そうなユニバーサルセレクタですが、以下のような弊害があるようです。

  • レンダリングが遅くなる(重くなる)。大きなページは特に。
  • 良いデフォルトのスタイルを無駄にしてしまう。(例えばサブミットボタンなど)

ユニバーサルセレクタ(全称セレクタ)を使った、CSSリセットの弊害? - Hato-Style はてなブックマーク - ユニバーサルセレクタ(全称セレクタ)を使った、CSSリセットの弊害? - Hato-Style

1つの目のパフォーマンスへの影響は、検証していないため、なんとも言えませんが、体感ではほとんど違いを感じられませんでした。2つ目は、ユニバーサルセレクタによって、変更する必要のない要素のスタイルを変更してしまうという問題です。このため、最近では必要なタグだけを指定する方法が推奨されています。

ユニバーサルセレクタを用いたCSSのリセットは,レンダリング速度の面で問題.使用するタグのみをリセットすると良い.
ユニバーサルセレクタを利用せず,デフォルトのCSSをリセットする - memo.xight.org はてなブックマーク - ユニバーサルセレクタを利用せず,デフォルトのCSSをリセットする - memo.xight.org

ユニバーサルセレクタを用いないほうが良い本当の理由

以下の記事によると、ユニバーサルセレクタを用いないほうが良い本当の理由としては、inputタグをはじめとしたフォームコントロールのスタイルにまで影響するのを避けるためだそうです。

ただし、最近の流れと言えるかどうかはわかりませんが、CSSに関する多くの著作や講演で知られるEric Meyer氏の以下の一連のBlog記事に端を発し、正規化に全称セレクタを用いない方式への理解が浸透したことは承知しています。
(中略)
特に最後にご紹介した「Formal Weirdness」のなかで、彼が全称セレクタを用いない理由として挙げているのは負荷云々ではなく、正規化の影響がフォームコントロールに属する要素にまで及ぶのを避けるため、としています。
全称セレクタを用いたスタイルの正規化 | Web標準Blog | ミツエーリンクス はてなブックマーク - 全称セレクタを用いたスタイルの正規化 | Web標準Blog | ミツエーリンクス