💻

GatsbyJSで作っているブログにリセットCSSを導入した

2020-07-13

はじめに

Semantic UIからMaterial-UIに移行して、Semantic UIを取り除いた際に全体のスタイルが少し崩れたので、Semantic UIが担っていたリセットCSSを改めて導入した。

どう選んだか

この辺の記事を参考に、選んでいった。すべてリセットするタイプというより、デフォルトのスタイルが当てられているタイプが良かったので、最終的に「A modern CSS reset」と「ress.css」が良さそうだった。

「A modern CSS reset」vs「ress.css」

どちらもスター数が約1300とほぼ同数で、最終コミットも近かったので、両方入れて試してみた。どちらもnpmで入れることができる。試してみたところ、リストのリセットの仕方が少し異なり、既に書いているCSSとの相性的に「A modern CSS reset」の方が良かったので、こちらを選択した。

やったこと

console
$ npm install -S modern-css-reset
/src/components/layout.js
import "modern-css-reset"

おわりに

うっかり自分でずれたスタイルを直そうとしかけたが、リセットCSSを導入して正解だった。

キクナントカ

ソフトウェアエンジニアをしています。Flutter、Rails、GatsbyJSを主に触っています。趣味でボードゲームを制作したり、個人開発したりしています。詳しくはこちら