CSS ResetとNormalize

すべてのブラウザーには、見出し、マージン、パディング、リスト、フォーム要素などのデフォルトスタイルを定義したユーザーエージェントスタイルシートが組み込まれています。これらのデフォルト設定はブラウザーによって異なるため、表示が一貫しなくなります。

CSSリセットはブラウザーのデフォルト設定をすべて削除し、白紙の状態を用意します。有名なEric Meyerのリセットでは、マージン、パディングなど多くのプロパティをゼロまたは none に設定します。

Normalize.cssは異なるアプローチを取ります。すべてのデフォルト設定を削除するのではなく、ブラウザーのデフォルト設定を統一し、見出しのサイズなど便利なデフォルト設定を維持しながら既知のバグを修正します。

比較：

• リセット：白紙の状態になり、すべてを自分で定義するため、作業量が増えます
• Normalize：便利なデフォルト設定を維持した一貫性のある基準になるため、カスタムコードが少なくて済みます

一般的なモダンリセット（Josh Comeauによるもの）は、影響の大きいデフォルト設定を対象にします。

画像に display: block を設定すると、コンテナ内の画像下部に生じるデフォルトのインライン間隔（line-height によるもの）をなくせます。

カスタムナビゲーションやUIリストをスタイリングするときは、リストマーカーとインデントを削除します。

多くのブラウザーでは、フォーム要素（input、button、textarea）はデフォルトでフォントを継承しません。一般的な修正方法は次のとおりです。

Tailwind CSSには、modern-normalizeを基盤とした独自のリセットPreflightが含まれています。Tailwindを使用すると、リセットが自動的に適用されます。

リセットまたはnormalizeのスタイルシートは、コンポーネントやユーティリティのスタイルよりも前、必ず最初に配置します。カスケードの順序により、詳細度の競合を起こさずにリセットを上書きできます。

完全なサードパーティ製リセットを読み込むのではなく、プロジェクトに合わせた最小限のリセットを自分で作成します。CSSのペイロードを小さく保つため、必要なルールだけを含めます。

ブラウザーのデフォルトスタイルは一貫していません。CSSリセットはすべてのデフォルト設定を削除し、normalize.cssはそれらを統一します。モダンリセットは、box-sizing: border-box、画像の最大幅、フォーム要素で継承されるフォントなど、影響の大きいルールに重点を置きます。リセットは必ず最初に読み込みます。