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
HTML5も含むCSS Resetは、以前の記事で触れたHTML5DoctorのHTML5 Reset Stylesheetあたりがいいのでしょうか？
まとめ
CSS Resetの使用の際の注意点を以下にまとめてみました：
- プロジェクトごとにメリット・デメリットを検証する
- 使用する場合は標準的なものを選ぶ
- 制作チーム内でリセットに対する考え方を統一、共有する
最後に…
この「まとめ」を書くためにSix Revisionsの「Should You Reset Your CSS?」という記事を非常に参考にさせていただきました。英語だし長いですが、非常によくまとまっていて一読の価値はあると思います。時間のある方はぜひ読んでみると良いのでは？
2011/01/11 6:35 by @Rriver | RSS | Fb
関連する投稿
- HTML5の要素にも使われているCSSで頻繁に使われるクラス名とは？
- CSS制作のワークフローについて考える
- IE9を含むHTML5とCSS3のブラウザ対応チャート
- 時短HTMLコーディングのZen Codingが面白い
- アイコン画像などをCSSスプライトにまとめる方法
関連するカテゴリ・タグ
カテゴリ： 制作・運営・ノウハウ
タグ： css、html、html5