2017-5-29

[CSS]NormalizeかResetか

もはや今更な話だけど、ネット上の Normalize vs Reset の記事を見てても Normalize 肯定派しか見当たらず、その主張が個人的に納得いかないものだらけだったので自分の意見をまとめておく。

Normalize/Reset の例

Normalize: sanitize.css

demo

Reset: YUI3

demo

個人的な結論

ベースは Reset を使う。デフォルトスタイルの margin に 0 以外が指定されているのは有り得ない。

ただ、フォーム系等デフォルトの見た目が有用と判断されるものに関しては、リセットされていない物を使う or 自身で弄ってリセットされないようにする。このあたりは個別調整。

詳細

Normalize の margin 問題

Normalize で僕が特に嫌いなのはデフォルトスタイルで margin を持ってしまっている点です。

例えばsanitize.cssの h1 要素だと、margin が以下のように指定されています。

margin: .67em 0;

この margin の指定、滅茶苦茶邪魔じゃないですか？
例えば「margin-bottom だけ 20px で他は 0」みたいな「.heading01」を作る時、以下のようにしないといけません。

.heading01 {
  margin-top: 0; /* リセットスタイルを当てないといけない */
  margin-bottom: 20px;
}

上記のように、多くのスタイルの指定でsanitize.cssを使うと Reset を使った場合本来不要なリセットスタイルを「個別に」当てないといけなくなると思うんですよ。個人的にはかなりありえない。

デフォルトの指定を活かせる？ほんと？

「Normalize を使っておくとデフォルトのスタイル指定活かせる」なんていう記事を頻繁に見かけますが、デフォルトスタイルのまま構築して OK なんて案件あります？少なくとも僕は見たことないです。

文書構造とスタイルの分離とは…

そもそも、HTML/CSS において文書構造とスタイルの分離は大原則であって、Normalize はその原則に逆行していると思うんですよ。「ここ今まで h2 だったけど、見た目はそのままで p にしよう」ってなった時にデフォルトの margin 活かしてたら CSS も調整いりますよね？見た目が HTML に引きずられてるけどそれはいいんですかね？

確かにそうはいってもフォーム系などデフォルトの見た目が残って欲しい物はありますけど、margin まで残すのはちょっとやりすぎかなと思います。

まとめ

以上のことから自分は圧倒的に（フォーム系等の見た目はデフォルトを残している）Reset 派です。