リセットcssとNormalize.cssの特徴と違い
最近までリセットcssとNormalize.cssを同じものと誤解していたので、備忘録もかねてそれぞれの特徴を書いておこうと思います。
リセットcssとは
ブラウザのデフォルトスタイルシートを全て無功化するcssのこと。
・コーディング量が多くなる
リセットcssはブラウザが初期設定しているmarginやpaddingの値などを全てゼロの状態にします。 全ての要素に対して自分でスタイルを定義する必要があるため、必然的にコーディングの量は多くなります。
・コーディングが楽
ブラウザのデフォルトスタイルシートを考慮しながら実装する必要が無いため、コーディングしやすいです。
Normalize.cssとは
ブラウザのデフォルトスタイルシートを活用しながら、ブラウザごとに異なる部分を補正するcssのこと。
・コーディング量が少なくなる
必要なスタイルだけを実装すればよいので、コーディング量が少なくなります。
・コード内にコメントが用意されていて独自に拡張しやすい
Normalize.cssの中身を見ると、各要素に対してひとつひとつコメントが記載されているのが分かります。
/** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; margin: 0.67em 0; }
・スマートフォンのブラウザに対応している
iPhone、Androidのデフォルトブラウザが主流だった昔と違い、使いたいブラウザを自分でインストールして使用するユーザーが増えています。 スマートフォンのブラウザ間のスタイルについても考慮しておいたほうがよいと思います。
・ブラウザのデフォルトスタイルシートの仕様を把握して実装する必要がある
ブラウザのデフォルトスタイルシートの仕様が分からないままコーディングしていると、意図しないスタイルになる可能性があります。
まとめ
ぐぐっていると「リセットcss vs Normalize.css」とどっちを使うべきかという情報が多くありますが、調べていて分かったことは両者は全然別ものだということです。
コーディングスキルが高くない自分にとっては、リセットcssのほうが使いやすかったです。 ブラウザのデフォルトスタイルシートを気にせずに、自分のやりたいスタイルを書いていけるので。 Normalize.cssはあくまでブラウザ間の違いを補正してくれるだけなので、リセットするためのcssは別途自分で定義してあげなきゃいけないです。 あと分かったことは、途中でリセットcssからNormalize.cssへ という切り替えはできないなと。逆も然り。 切り替えるならゼロから作り直すしかないことは分かりました。
自分はできるだけ書くコードは少なくしたい派なので、Normalize.cssを採用してブログのコーディングをしている最中です。 リセットcssに慣れてしまうと、Normalize.cssが使いにくくて仕方ないです。 意図しない箇所に余白ができたりして、このタグこんな動きするの！？と驚くことが多いです。 本来、意識しながら書かなきゃいけないところなんですが・・・今更感が否めない、くうう。
