【CSS】Reset CSSやNormalize.css…。CSSリセットは何を使うべきか比較してみた

ブラウザ間のCSS差異をなくすため、表現を正確にするため、ブラウザデフォルトのCSSをリセットするCSSがあります。おそらくお使いの方も少なくないのではないでしょうか。

今日はそんなリセットCSSの流れをまとめて、今使うべきものを考えてみました。

初期段階

*{
    margin: 0;
    padding: 0;
    border: none;
}

昔のリセットは*セレクタを使い、全てをリセットしました。
コード的には短くスマートのようですが全ての要素にスタイルが適用されるため、inputタグも枠線がないなどの現象が生まれます。ゆえに、再定義という意味で必要以上にCSS記述をしないといけません。

たくさんあるCSS Reset script

CSS Reset | 2015’s most common CSS Resets to copy/paste, with documentation / tutorials

というWebページが有ります。
TOPにはmost popular CSS Reset scriptsと表示されています。

※ 使用されているランキングというわけではなさそうです
※ 若干情報が古いです(Normalize.cssは現在v3.0.2)
Screen Shot 2015-03-17 at 22.25.07

ざっと見ていきます
  • Eric Meyer’s “Reset CSS” 2.0
    • 名の通り、Eric Meyer氏によって提唱されたreset scriptです。
  • HTML5 Doctor CSS Reset
    • HTML5と名前が付いている通り、HTML5に特化しているのが特徴です。
  • Yahoo! (YUI3) Reset CSS
    • User Interface Libraryのreset scriptです。結構前は人気がありましたが、現在はどうなんでしょう。
  • Universal Selector ‘*’ Reset
    • 冒頭で述べた*セレクタをつかったreset scriptです。
  • Normalize.css
    • これは少し特色があり、便利なデフォルトCSSは保持するようになっています。バグや一般的なブラウザの不整合を補正します。Chrome, Firefox, Opera, Apple Safari, IEなどに対応しています。

以下の様なセレクタがあると、HTML5に対応している感がありますね。

audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

どれを使うべきか

話題となっているのはどれでしょうか。

Screen Shot 2015-03-17 at 22.40.01

検索ボリュームでみていくと、reset.cssとNormalize.cssが2013年あたりから逆転し、現在はNormalize.cssが人気度が高いですね。

先述しましたが、Normalize.cssは他のCSS Reset scriptと違って、ブラウザのスタイルを消去するのではなく、デフォルトのスタイルを保持した上で正常化(Normalize)するという考え方です。

ちなみに、

  • Twitter
  • Soundcloud
  • Github
  • Medium
  • Bootstrap
  • Guardian

などがNormalize.cssを採用しています。

まとめ

Normalize.cssがベストプラクティスといっていいと思います。
しかし、そもそもResetとNormalizeという考え方が異なるので、その点は意識しておく必要があります。

もっと違いや特徴を知りたい場合は、What is the difference between Normalize.css and Reset CSS? – Stack Overflowを御覧ください。

フォローして続編をチェック

@universionsをフォロー