リセットCSSやNormalize.cssは本当に必要なのか

• Web Create
• 2016.10.17

使わないという選択肢

基本的にトライムではweb上で公開されているリセットCSSや、
Normalize.cssは利用していません。

社内ルールを勝手気ままに作って、みんなを従わせている僕の個人的な意見として、
意図していないスタイルがあるのが気持ち悪いというのもあります。

しかし、実際にリセットCSSやNormalize.cssに書いてあるすべての記述が必要になるのでしょうか？ トライムでは長年に渡る厳選の末、下記のようなスタイルを使っています。

トライムのCSS

@charset "UTF-8";

* {
  margin: 0;
  padding: 0;
}

html {
  font-size: 62.5%;
}

body {
  font: 500 1.4rem/1.6 "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
  color: #4c4c4c;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
  font-size: 100%;
}

p {
  margin-bottom: 1em;
}

ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0px;
}

form label {
  cursor: pointer;
}

a {
  text-decoration: none;
  color: #4c4c4c;
}
a:hover, a:active, a:focus {
  color: #b2b2b2;
}

a img {
  border: none;
}

.cf:after {
  display: block;
  clear: both;
  content: '';
}

Normalize.cssの必要性

Normalize.cssのコメントを読む

試しにnormalize.cssのコメントを読んでみてください。
最新バージョンのものではありませんが、翻訳を載せてくださっています。

normalize.cssで使用されている各スタイルがどのように機能しているか解説

普段コーディングをする上では、その大半が不必要だったりはしないでしょうか？
読んだ上で必要と思われるのであれば、使用することにはなんの問題もありません。
むしろ積極的に使うべきです。

でも「これ使ってないな」と思われる部分が多いのであれば、
利用するかどうか、再検討してみてはいかがでしょうか？

Normalize.cssの容量

Normalize.cssは現在、最新のv5.0.0で461行、8KBありました。

8KBというのは大した重さではないのかもしれませんが、
上のCSSは55行、667バイトです。結構節約できています。

まとめ

この記事はリセットCSSやNormalize.cssを否定するものではありません！
有効に活用できるのであれば、なんでも使ったほうが良いですよね。

CSSに限らず衝動買いしたあげく、
使わないということが多い自分への自戒を込めて書きました。
何かを利用するときには、それが本当に必要なのか、よく考えてから使っていきたいですね。