reset.cssの選定時にいくつかピックアップしたものを紹介します.
これは, Next.jsのreset.css選定時に書いたドキュメントを記事にしたものです.
主にnpm で検索し, Weekly Download数を参考にしながら選びました.
あくまでも **[2021年6月時点]**での比較であり, アップデートが入ることがあるので実際に使う前にドキュメントを確認するようにしてください.
ピックアップするreset.css
- [normalize.css](## normalize.css)
- [sanitize.css](## sanitize.css)
- [modern-normalize](## modern-normalize)
- [styled-reset](## 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も多く, 対応も早いようだったので流行りから選定するというのも一つの視点としてありなのかなと思います.