📘
【2022年3月の】モダンなCSSリセット
経緯・CSSリセットとは
CSSリセットに関するまとまった情報がなかったので、自分で書くことにした。
CSSリセットとはブラウザに標準的に設定されているスタイルを無効化することをいう。
CSSリセットの他にノーマライズ（normalize）というものもあるが、これはブラウザ間の差異をなくすためのものだ。
なのでボタンの場合、CSSリセットはdivと見た目が同じになるが、ノーマライズはデフォルトのボタンの場合が多い。
ノーマライズ目的ならばmodern-normalizeがおすすめだ。
sindresorhus氏が管理しているOSSで、normalize.cssの上位互換の機能を提供している。
CSSを読み込む
まずCSSの読み込みについて説明する。
この記事とは趣旨がずれるが@importでの読み込みはファイルの巨大化などの観点から非推奨とされている。（sassでは今年廃止される）
なのでcss-loader（jsでcssファイルを解決するためのWebpackローダー）などが入っている環境では、中心となるjsファイルからimportするのがよいだろう。
import "./style.css"; // 相対パスで読み込む
import "modern-normalize/modern-normalize.css"; // node_modules配下のファイルを読み込む
CSSリセットまとめ
大抵の場合は以下の二つから必要なCSSリセットを利用すればよい。
これらはすべて@unocss/resetでインストールできる。
npm install @unocss/reset
1. eric-meyer
昔からあるCSSリセット。行間すらない。
// reset.css by Eric Meyer https://meyerweb.com/eric/tools/css/reset/index.html/
import '@unocss/reset/eric-meyer.css'
2. Tailwind praflights
Tailwindcssに組み込まれているCSSリセット。デフォルトも綺麗になっている。
// preflights from tailwind
import '@unocss/reset/tailwind.css'
サンプルコート
実際に利用してみた例。
cssが競合しちゃうけど、ご愛敬で。
Discussion