各ブラウザーには、あらかじめ適用されているCSS（デフォルトCSS）があります。例えば見出しを設定すると、特にCSSで指定しなくても、文字サイズが大きくなったり、太字で表示されたりします。
しかし、デフォルトCSSはブラウザーによって値が異なります。
大雑把に「h1は大きな太字の文字で」といった表示で問題がない場合は、デフォルト値のままでも問題ないケース（デザイン）もあると思いますが、他のブラウザーで見た場合に「意図しないところで文章が改行されている」といった違いが発生したりします。
各ブラウザーのデフォルトCSSによる表示の差異をなくす目的で使われるのが、「リセットCSS」「ノーマライズCSS」「サニタイズCSS」です。
リセットCSS (Reset CSS)とは
リセットCSSは、見出しの文字の大きさや太さ、行間など、すべてのHTMLタグに対してスタイルのリセットを行うCSSです。
見出し、本文、リストなど、どのタグを使用しても同じ見た目となるように、margin、paddingを0に指定されていたりします。
ノーマライズCSS (Normalize CSS)とは
ノーマライズCSSは、ブラウザー間で差異がある部分を調整し、スタイルを統一するCSSです。
margin、paddingや行間など、ブラウザーごとの差を吸収するように値が指定されているため、どのブラウザーで見ても、デフォルトCSSとほとんど変わらない見た目となります。
サニタイズCSS (Sanitize CSS)とは
サニタイズCSSはノーマライズCSSの発展版のようなもので、「レスポンシブWebデザインのサイト製作に最適化する」など、製作を進めやすいように便利な記述があらかじめ行われているCSSです。
box-sizingなど、昨今基本となっている記述があらかじめ行われているものが多く、それ以外の部分については、ノーマライズCSSと同様にブラウザー間の差異が吸収されています。
どれを使えばよい？
「結局どれが良いの？」という疑問への回答は、よく聞かれるのですが非常に難しいものになります。
何を作るのか、更新頻度、1人で開発するのか開発者が複数人となるのか、などによって回答が大きく変わってしまいますし、開発者の好みも当然あります。
CSSアニメーションや、インタラクティブでアグレッシブな（？）サイトを製作する場合は、サイズや余白などもきっちりと作りこむことになると思いますし、更新頻度もそれほど高くないと思われますが、そのような場合には、タグごとの差ですら気にする必要のなくなる「リセットCSS」が良いかと思います。
時間経過で情報が流れてしまうSNSを補完する目的でつくられるサイトなど、読み物や情報発信が多く、更新が想定される場合は、ノーマライズCSSやサニタイズCSSが良いと考えます。
個人的には？
ノーマライズを採用するケースが圧倒的に多いです。
「個人で完結する」と断言できる場合はサニタイズCSSでも良いのですが、複数人で作業する場合、サニタイズCSS自体のことを学習するコストが必要です。そのため、「大規模開発で継続的に同じメンバーが作業する」などのケースではない場合、リセットCSSかノーマライズCSSのほうが少ない学習コストで作業を開始できます。
更新が想定される場合、クライアントからは多様な要望が来ることが想定されます。「お知らせだけ」と考えていても、「お知らせの中でインタラクティブにアピールしたい。コストは準備できる。」など、運用が始まると想定外のことが起きるものです。あるいは「すぐにこの情報出したい。デザインなければすぐでしょ？」などというオーダーは、非常によくあるお話です。
このような多様なニーズに素早くこたえるためには、なんでもリセットしてしまうリセットCSSは不向きです。そのため、筆者は基本的にリセットCSSを採用します。
ちなみに、「リセットCSSをベースに使わないタグへの指定はしない」とする人も多く見受けられますが、「どの情報を削除したか」を運用フェーズでも引き継ぐコストがかかるため、筆者は添削して削除はしません。
添削により軽くなるとされるメリットは決して無視できないですが、リセットCSSの添削よりも前に手を付けるべき軽量化は他にもたくさんある、と思うので。
コメントを残す