Reset CSSについてのまとめ：リセットするべき?しないべき？

「CSS制作のワークフローについて考える」で触れた「リセット・スタイルシート（Reset CSS）」についてまとめてみました。まず、結論から言ってしまうと、

• Reset CSSの使用は、そのメリット・デメリットを理解したうえで
  プロジェクトごとに考えるべき

だということです。「効率的にブラウザ間の表示を統一させること」の優先順位が高いプロジェクトでは使えば良いと思います。逆に多少のブラウザ間の表示の差異は問題ない、ブラウザのデフォルトを有効利用したいという場合はReset CSSを使用しない選択もありだと思います。

では、そもそもReset CSSが作られた理由や、そのメリット・デメリットはなんなのでしょうか？

Reset CSSが作られた理由

ひとことで言うと「ブラウザ間の表示を統一しやすくするため」です。

h1、a、ul、liなど各タグの表示スタイルは、ブラウザごとのデフォルトが少しずつ違っています。その違いをリセットして、CSS制作をより効率的にすることがそもそもの目的です。ちょっと古いですが、こちらでブラウザのデフォルト表示の違いのチャートがみられます。結構違いますよね。

Reset CSSのメリット・デメリット

メリット

• ブラウザ間の表示の違いを効率的に最小限に抑えることができる
• ブラウザ間の差異を気にせずに各要素の必要な部分だけスタイルできる

デメリット

• CSSの量が多くなる
• リセットしたスタイルの再設定を忘れる可能性がある
• リセットしても結局再定義している場合が多いので意味がない（？）

標準リセット、それともカスタム・リセット？

Photo by ervega

Reset CSSを使用する際はよく知られた標準的なリセットを選ぶのが重要だと思います。代表的なReset CSSには実績がありますし、多くの方に検証されています。また、チームで制作を進める場合、よく知られているもののほうが作業が効率的だと思います。さらに、YUI Libraryのようにドキュメントやサンプルがまとまっているものは、それだけで魅力的です。チームで制作をする場合は、よっぽどのメリットがなければカスタムのものよりも標準的なものを使うのが良いと考えています。

代表的なReset CSS

• YUI CSS Reset
• Eric Meyer’s CSS Reset

HTML5も含むCSS Resetは、以前の記事で触れたHTML5DoctorのHTML5 Reset Stylesheetあたりがいいのでしょうか？

まとめ

CSS Resetの使用の際の注意点を以下にまとめてみました：

• プロジェクトごとにメリット・デメリットを検証する
• 使用する場合は標準的なものを選ぶ
• 制作チーム内でリセットに対する考え方を統一、共有する

最後に…

この「まとめ」を書くためにSix Revisionsの「Should You Reset Your CSS?」という記事を非常に参考にさせていただきました。英語だし長いですが、非常によくまとまっていて一読の価値はあると思います。時間のある方はぜひ読んでみると良いのでは？

2011年1月11日に公開された記事です。

この記事をシェアする

• ツイート
• シェアする
• ブックマーク
• Pocketに保存