mottox2 blog

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

blogcss

このブログを作っていた時、迷ったことの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をリセットしてから本来書きたいスタイルを書くということが多くなっていきます。

css
.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月で止まっています。使う時は自己責任で。


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

B!
event

技術書典6にサークル参加したけど反省点が多すぎた

前回に引き続き、技術書典6にサークル主として参加させていただきました。 技術同人誌界隈はかつてない盛り上がりを見せており、今回のサークル当落発表の際は地獄のようなタイムラインになっていました。そうい

技術書典
summary

最近見つけた気になる作図系Webサービス3選

今年に入って見つけた作図、画像生成系のサービスをまとめてみました。 > BlobmakerBlobmaker 最近見かけることが多くなった、丸みのある形状をランダムで生成する画像メーカー。

dev

技術書典6でNetlifyとGatsby本を頒布します

技術書典6「か67」でNetlifyとGatsbyの本を頒布します。 Netlifyは92ページ、Gatsbyは100ページ超(執筆中)でどちらとも¥1,000で頒布を予定しています。 興味のあ

gatsbynetlify技術書典