Reset CSSとは

ウェブサイトのコーディングを開始するときにまず初めにやることがReset CSSの準備です。
Google Chrome、Firefox、Microsoft Edgeなど、ブラウザベンダによってユーザエージェントがデフォルトで用意するスタイルシートが異なります。つまり、CSSを何も書いていない状態でもブラウザによって要素(タグ)の表示方法が異なるということです。全てのブラウザで同じ見た目を提供するためにはReset CSSが必要です。

どのReset CSSがいいのか

Reset CSSにはたくさん種類がありますが、古いものから順番に紹介します。

2011年に最終の更新があったReset CSSです。今となっては古いため、box-sizing: border-box;など、新しく追加された便利プロパティが記載されておらず、使いづらさは否めません。これからコーディングを始めるという場合は利便性を考えると採用することはほぼないと思います。

Yahoo!が提供するReset CSSです。最終更新が2014年になっています。こちらもbox-sizing: border-box;などのプロパティには対応していません。

CSSフレームワークのBootstrapと同じReset CSSです。Bootstrapが好きな方にお勧めです。これまでのReset CSSとは違い、全くのゼロではなくBootstrapらしいスタイルになります。全ての要素にbox-sizing: border-box;が適用されるため、マージンの計算などを気にせずにコーディングできます。

クセがなく、使いやすいReset CSSです。box-sizing: border-box;はもちろん、最新のプロパティも考慮されています。しかし、非常にコード量が多く、好き嫌いは分かれると思います。

MDN Web Docsが採用するReset CSSです。少ないコード量でやるべきことはやっています。どうしてそのような実装になっているのかの解説もあり、シンプルで良いReset CSSだと思います。

幅広いブラウザ・バージョンへの対応を求められる場合

一部のケースでは、幅広いブラウザ・バージョンへの対応を求められることがあります(災害情報のホームページとか?)。その場合は、次のサイトでReset CSSで使用されるプロパティが使用可能かどうかを調べましょう。

Can I use... Support tables for HTML5, CSS3, etc

サポート対象外であれば、わざと古いReset CSSを使用することも視野に入れて考えます。

次のような感じでCSSのプロパティ名で対応状況を検索することができます。box-sizingであれば、IE7以下を除けば全て対応しているんですね。

caniuse

まとめ

好きなReset CSSを使えばいいと思います。ブラウザの初期スタイルを統一するだけなので、どれを選んでもほぼ同じです。