Normalize.css は僕もプロジェクトによって部分的に取り入れてたんだけど、v2.0 になったのをきっかけに今後はどのプロジェクトでもまるごと採用していこうかと考えてる。たとえばこのサイトでは今までどうやっていたかというと、
@mixin normalize-html {
font-family: sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
@mixin normalize-body {
margin: 0;
}
html {
@include normalize-html;
font-family: $sans-serif;
overflow-y: scroll;
...
}
body {
@include normalize-body;
background-color: $white;
color: $black;
...
}
こんな風に Normalize.css をセレクタごとに Sass ミックスインに分解して、プロジェクトの SCSS の各セレクタに @include する、という面倒なことをしてた。v2.0 以前はとくに見出しやリストやフォームあたりでプロパティの上書きという無駄が発生しがちだったのでこういうアプローチを採ってたんだけど、どのスタイルを取り込んでるか把握するのがたいへんだし、どうしても二度手間感が拭えない。あとチームでメンテナンスする場合に「Normalize.css 使ってるよ」って一言で言えずコードを追ってもらう必要があるのも面倒。
その点、v2.0 は 古いブラウザ用のコードがかなり削られた ので内容がシンプルになり、無駄が発生しづらくなった。というわけで、最近のプロジェクトではまるごと使うことにした。具体的には、Normalize.css をリネームしてコメントを削除しただけの _normalize.scss という SCSS ファイルを用意してそのまま @import する。
いわゆる CSS リセットをかましたいようなプロジェクトでも、reset.css みたいなのを使うんじゃなくて、_normalize.scss を @import した上で、プロパティごとにリセットする % セレクタを用意して、これを必要に応じて @extend するという手を使ってみてる。
@import "normalize" // import _normalize.scss
%reset-margin {
margin: 0;
}
%reset-padding {
padding: 0;
}
%reset-list-style {
list-style: none;
}
.site-logo {
@extend %reset-margin;
}
.primary-nav {
ul {
@extend %reset-margin;
@extend %reset-padding;
}
li {
@extend %reset-list-style;
}
}
ちなみに、Normalize.css が古いブラウザ (とくに IE 7 と 6) のサポートをやめたと言っても、内容に根本的な変更があったわけではなく、いくつかのスタイルを整理したのがアップデートの中心なので、古いブラウザをサポートするプロジェクトに使えないということはまったくない。今までどおり古いブラウザをサポートした v1.0.1 も提供されてるけど、無駄が発生しやすいので今となってはちょっと微妙。v2.0 をインクルードした上でプロジェクトごとに必要なスタイルを追加する方がいいと思う。古いブラウザのサポートをやめたというより、外に追い出して製作者に委ねた、と捉えるとよさそう。