そのリセットCSS必要？定番から自分流に整えるヒント

リセットCSSって、なんとなくそのまま使っていませんか？ 私はその一人でした…。
でも、ふと「このリセットって本当に必要なのかな？」と思う瞬間があります。そもそもリセットCSSって、なければいけないものなんでしょうか？

そんな素朴な疑問から始まって、リセットCSSの目的やよく使われるスタイル、そして自分用に整理した内容をここにメモしていきます。

リセットCSSの目的

ブラウザには ”user agent stylesheet（UAスタイルシート）” と呼ばれるスタイルが付けられています。自身でCSSを作らずとも、HTMLタグにフォントサイズやマージンなどのスタイルが付けられます。

UAスタイルシートはブラウザごとに異なります。最近では差異が少なくなっているとのことですが、完全に統一はされていません。

リセットCSSの目的は、ブラウザごとにバラつきがあるデフォルトスタイルの違いを打ち消し、ベースとなるスタイルを統一させること。
例えば、<h1> のフォントサイズや <ul> のマージンが、ChromeとFirefoxで微妙に異なるといったケースです。

こうした差異がレイアウト崩れや意図しない見た目につながることを防ぐために、まず独自のCSSを当てる前の「スタートラインを揃える」のがリセットCSSの役割です。

【参考】各ブラウザの user agent stylesheet のリンクまとめ

代表的なリセットCSSと私が選んだもの

現在様々なリセットCSSが公開されており、どれを使用するか迷います。またリセットCSSには、ノーマライズCSSやサニタイズCSSと呼ばれるものもあり、ますます何を使えば良いか悩みます。

Eric Meyer’s Reset はとても古いリセットCSSでした。

Normalize.css を調べると、よく出てきたものがこちら。
https://necolas.github.io/normalize.css/
こちらも作成されたのが古くメンテナンスもしていないようです。（GitHubで確認したところ最後のログが2018年…）

Sanitize.css はノーマライズした上で、より使いやすいようスタイルが追加されたものを指すようです。

新しいCSSセレクタも増えているので、他のものを探していくつかピックアップしました。

【ブラウザのデフォルトスタイルを使用しない。従来のリセットCSSよりシンプル＆軽量化】

The New CSS Reset

Destyle.css

【モダンブラウザをターゲットにしたリセットCSS】

A Modern CSS Reset

A (more) Modern CSS Reset

また、リセットCSSとは異なるタイプのスタイルシートとのことですが、以下のようなスタイルシートも誕生していました。

UA+

”UA+” は「UAスタイルシートを改善し、ブラウザの使用が不十分な部分のみに新しいスタイルを追加することに重点を置いている」とのことです。また過剰なリセットを行わず、アクセシビリティを重視しているとのこと。まだ初期アルファ段階のようですが、どこかで使ってみようと思っています。

現在私は ”A (more) Modern CSS Reset” を利用していますが、そのまま丸っと使ってはいません。プロジェクトによって削除したり、内容を変えたりしています。

どのスタイルが本当に必要？無駄を見極めるポイント

リセットCSSを使っていても、「結局上書きしてる…」という事も無きにしも非ず。以下のような無駄を削ぎ落とすヒントから見直してみてください。

• 本当にリセットしたい要素ですか？
  テーブルやフォーム系は毎回使う？今回の案件では不要なものが含まれていないか？
• 独自スタイルで上書きしている箇所は？
  初期値を消して、また付け直すなら、そもそも消す必要はないのでは？
• 自分のCSS設計方針に合っている？
  BEMやUtility-firstのような設計手法によっては、不要なリセットも多いかもしれません。

リセットCSSを自分用にカスタマイズする

リセットCSSは、ブラウザ間の違いをなくしてスタートラインを整える便利なものです。しかし、やみくもに全部適用してしまうと、本来不要なものまでゼロにしてしまい、かえって余計なスタイル調整が増えることもあります。

リセットCSSは「そのまま使うもの」というより、必要に応じて削っていくのが本来の使い方かもしれません。

例えば以下のように、よく使うタグのみをピックアップしたシンプルなリセットCSSだけでも十分なケースもあります。

html, body {
  margin: 0;
  padding: 0;
}

ul, ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

img {
  max-width: 100%;
  display: block;
}

html, body {
  margin: 0;
  padding: 0;
}

ul, ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

img {
  max-width: 100%;
  display: block;
}

何度も同じスタイルを打ち消さなければならないのであれば、新たに付け足していけば良いのです。

どれが正解というより、「いまの自分にとってちょうどいい」がベストです。プロジェクトや開発スタイル、その時の状況に合わせて「選んで・削って・整える」を繰り返し、自分のスタイルに合わせて最適化していくのが良いと思います。

私はこれまで冗長な古いリセットCSSを使用していました。（何年も前にどこからか見つけてきたやつ）今回新しくリセットCSSを再検討し、少し手を入れることでコードが大分スッキリと整えられました。