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!
tips

Google Chromeスクショ術

技術同人誌やブログを書く上で外せないのがスクリーンショットを取ることです。 同人誌を5冊書いていく経験の中で慣れてきたので、自分がスクリーンショットを撮る時に使っている方法を紹介します。 > C

chrome
event

技書博で「SlackApps開発ガイド」を頒布します

7/27に大田区産業プラザPiOで行われる技術書同人誌博覧会(技書博)に「つのぶえ出版」としてサークル参加します。 今まで「つのぶえ出版」としてはGatsbyとNetlifyの本を4冊だしていまし

event

Ginza.jsでNext.jsをNetlifyで配信するLTをしてきた

2019/5/22にPlaidさんのオフィスで行われたGinza.js #1にLT枠で参加してきました。 前から、Plaidさんの会場は一面芝というのをTwitterで観測しており、今回初めてお邪魔

ltnetlifyreactnextjs