オレオレノーマライズ CSS「Neo's Normalize」を作った

Normalize.css や、Bootstrap 4 から採用されている Reboot などの思想を基に、オレオレノーマライズ CSS を作った。その名も「Neo's Normalize」

動作デモはコチラ。

作った経緯

自分のメインサイト Neo's World では、古くは全称セレクタによる Reset.css、最近は Normalize.css をカスタムしたものを使っていた。また、はてなブログ類でも Normalize.css が組み込まれたテーマを基にカスタマイズして使っていた。

Normalize.css は大変優秀なのだが、個人的にはレガシーブラウザをサポートしなくていいかなーとか、フォーム部品のノーマライズが多くてファイルサイズがかさばるな〜とか思って、軽量版を作りたい、と思ったのがきっかけ。

そうしているうちに Bootstrap 4 が正式リリースされ、中身を見ていると Reboot という独自のノーマライズ CSS が用意されていることに気付いた。Normalize.css よりももう少しスタイリングされていて、特に「margin は bottom にだけ付ける」というルールが良いなと思った。

そこで、Normalize.css と Reboot のいいとこ取りをして、自分のサイト群のベースデザインに使えるスタイル定義をブチ込んで、独自のノーマライズ CSS を作ることにした。

方針

Neo's Normalize の製作方針は次のとおり。

こんな感じで、完全にオレオレ用のノーマライズを作った。

主な機能・定義

主な機能、というか、主にスタイル定義したものを紹介しておく。

こんなところか。何か気付き次第ちょこちょこ直していこうと思うので、よかったら使ってみてほしい。