はじめに
Semantic UIからMaterial-UIに移行して、Semantic UIを取り除いた際に全体のスタイルが少し崩れたので、Semantic UIが担っていたリセットCSSを改めて導入した。
どう選んだか
この辺の記事を参考に、選んでいった。すべてリセットするタイプというより、デフォルトのスタイルが当てられているタイプが良かったので、最終的に「A modern CSS reset」と「ress.css」が良さそうだった。
- hankchizljaw/modern-css-reset: A bare-bones CSS reset for modern web development.
- filipelinhares/ress: 🚿 A modern CSS reset
「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を導入して正解だった。
