リセットCSSはdestyle.cssがおすすめな理由

2023.03.17

技術のこと

リセットCSSとは何か

リセットCSSは、WEBデザイナーや開発者が使う一連のCSSルールで、ブラウザ間のスタイルの違いを最小限に抑えることを目的としています。
各ブラウザはデフォルトで独自のスタイルを持っており、異なるブラウザ間で一貫した見た目を持つことが難しくなります。リセットCSSを使用することで、すべてのブラウザで一貫した基本スタイルを適用し、開発者が独自のスタイルを追加しやすくなります。

大まかに分けて2種類ある

リセットCSSには数多くバリエーションがありますが、おおまかに分けて2種類あり、それぞれ考え方やアプローチが違います。

Reset CSS

全ての要素のマージン、パディング、ボーダーなどを0にリセットし、開発者が全てのスタイルを一から構築できるようにします。

本当にすべてのHTMLタグのスタイルが0になります。文字通りリセットCSSですね。すべてのスタイルを自分で定義したい人向け。

Normalize.css

ブラウザ間のスタイルの違いを統一し、同時にHTML要素のデフォルトスタイルを保持します。これにより、より一貫したデザインが可能になり、開発者が独自のスタイルを追加しやすくなります。

デフォルトのスタイルをある程度生かしつつ、スタイルを統一する。タグに適度な余白が欲しい人向け

個人的にはデフォルトスタイル必要ないのでリセットCSS派です。
その中でも新しいdestyle.cssは、

すべてのタグを完全リセット
モダンブラウザに対応
新しいHTMLタグに対応
ゆえに軽量

といった特徴を持ちます。

CDNはこちら

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/destyle.css@1.0.15/destyle.css"
/>

実際に見た目を比較してみた

それぞれ適用した状態を比較してみましょう。（divとsectionは視認性を高めるため、あらかじめ背景色設定しました。）

リセットCSSを使用しない場合（デフォルトの状態）

ブラウザのデフォルトスタイルにより、各要素の文字サイズや余白、行間が設定されています。

normalize.cssを使用した場合

デフォルトの状態とあまり変わらないですが、ブラウザ毎の差異が解消されています。
画像の余白がリセットされていますね。

destyle.cssを使用した場合

各要素のスタイルが、文字サイズ、余白など、行間にいたるまで完全にリセットされています。hタグも1〜6まで全く同じです。
また、input要素のスタイルもリセットされているのが分かります。

まとめ

どちらを使うべきかは好みや案件によって変わると思います。
イメージ的には
CSSをあまり書きたくなくて、適度な余白や文字サイズは最初から欲しい開発者はnormalize.css。要素のスタイルをすべてCSSで書きたいデザイナーはリセットCSS（destyle.css）が向いていると思います。
ただ、destyle.cssはあらゆる要素を完全にリセットするので、スタイルの適用し忘れるにご注意ください。（特にinput要素）