2018年のCSSリセットはress.cssを選べばよさそう

2018.05.07

このブログを作っていた時、迷ったことの1つとして「スタイルのリセットどうするか？」というものがあります。

ご存知の通り、各ブラウザは標準に当ててくるスタイルが違います。特に有名なのが、Safariでは明朝体がデフォルトでそれ以外はゴシック体になるというものだと思います。 この差分を解消するためにすべてのスタイルをリセットするアプローチのreset.css、有用なスタイルは残して表示を統一するnormalize.cssという大きく2つのアプローチがありました。

僕はreset.cssとnormalize.cssのいいとこ取りなress.cssを使うことに決めました。以下選択の背景です。

normalize.cssのツライところ

自分がWeb開発を始めた2012年ごろはreset.css一択で、いつの間にかnormalize.cssの勢いが増してきてnormalize.cssをCSSリセット手法として扱うUIフレームワークも増えていきました。

normalize.cssは基本的にスタイルをいじらないCSSフレームワークに使うのは便利なのですが、少しでも新しいものを書こうとすると次のようなmargin, paddingをリセットしてから本来書きたいスタイルを書くということが多くなっていきます。

.hoge {
  margin: 0;
  padding: 0;
  /* 本来書きたいスタイル */
}

normalize.cssを使うプロジェクトでは、標準のスタイルを残しているので、マークアップを変更するとfont-sizeやmargin, paddingが変わってしまうのが原因です。

近年では、Component単位でHTML, CSSを書いていこうという流れがあるように思えます。その際にマークアップによって変わるスタイルは邪魔になることでしょう。

ress.css

そこで、a modern CSS resetを謳っているress.cssが候補に上がっていきます。以下のような特徴を持っています。

  1. Apply box-sizing: border-box; in all elements.
  2. Reset padding and margin in all elements.
  3. Specify background-repeat: no-repeat in all elements and pseudo elements.
  4. Inherit text-decoration and vertical-align to ::before and ::after.
  5. Remove the outline when hovering in all browsers.
  6. Specify font-family: monospace in code elements.
  7. Reset border-radius in input elements.
  8. Specify font inheritance of form elements.
  9. Remove the default button styling in all browsers.
  10. Specify textarea resizability to vertical.
  11. Apply cursor: pointer to button elements.

ざっくり言うといいとこ取りなreset.cssという解釈で問題ありません。ress.cssをベースにスタイルを書いていくとmargin, paddingが基本的についていないので非常にCSSが書きやすくなります。

特にAtomicDesignやReactでComponent書く時もとりあえず0からのスタートで書けるので非常に相性がいいです。

もちろんnpmでも配信されているので、ReactやVueのプロジェクトで使いたい場合は npm install --save ressでインストールしてimport 'ress'とかで導入できます。

変更する内容がないので当然とは言えますがlast commitが2017年2月で止まっています。使う時は自己責任で。

余談ですが、ライブラリ比較記事みたいな記事はたくさんあるんで、「僕はこれを選びました」みたいな記事をちゃんと書いていきたいと思っています。 比較記事は比較記事で価値はあるのですが、その人の選定理由をみたいと思うことが多いのでこういう記事を書いていきます。

Xでシェア