reset.cssの選定時にいくつかピックアップしたものを紹介します.
これは, Next.jsのreset.css選定時に書いたドキュメントを記事にしたものです.
主にnpm で検索し, Weekly Download数を参考にしながら選びました.
あくまでも [2021年6月時点]での比較であり, アップデートが入ることがあるので実際に使う前にドキュメントを確認するようにしてください.
ピックアップするreset.css
normalize.css
sanitize.css
modern-normalize
styled-reset
以下, それぞれのreset.cssについて特徴と導入した際の懸念点をまとめていきます.
normalize.css
全てのブラウザのスタイルをリセットしつつ, 有用なデフォルトのスタイルを保持
バグと一般的なブラウザの不一致を修正
sanitize.css
normalize.cssをブラウザのスタイルのリセットに加え, ブラウザ表示の誤差を修正
デフォルトのスタイルをより最適化
Weekly Downloadsが多い
ドキュメントが丁寧
懸念点
Unpacked Sizeが49.2kBと重たい(modern-normalizeは9.82kB)
LastPublishが9ヶ月前
modern-normalize
nomalize.cssをモダンブラウザ用に最適化したもの
軽量
box-sizing: border-box; を採用
懸念点
サポートのブラウザがnormalize.cssに比べて少ない
最新のChrome, Firefox, Safariに対応
Edge, (Opera, IE)に非対応
ress
normalize.cssをカスタマイズしたもの
box-sizing: border-box; の採用や全ての要素のpadding, marginをリセット等さまざまな特徴
サポートのブラウザはnormalize.cssと同じ
懸念点
Weekly Download数が少ない(normalize.cssの1/10くらい)
githubのstar数, issue数がnormalize.cssに比べて少ない
styled-reset
Reactのstyled-components用のreset.css
コンポーネントごとに適用できる
懸念点
サポートのブラウザがドキュメントに書いていない
プロジェクト全体に適用するならこれである必要はない
結論
Weekly Download数, 対応ブラウザ数の多さ, ドキュメントの丁寧さからするとsanitize.cssがよい
軽量さを重視するのならnormalize.cssがよい. ただし, 対応ブラウザを考慮する必要あり.
まとめ
いかがだったでしょうか？？（１回書いてみたかった）
調べて比較をしてみた感想としては, reset.cssは流行りとそうでないものの差が大きいように感じました. もちろん, ここで取り上げていないものもたくさんあります.
ただ, 流行っているものはissueやpull requestも多く, 対応も早いようだったので流行りから選定するというのも一つの視点としてありなのかなと思います.
↧