CSS in JS なのか CSS Modules なのか

どっちがいいのか分からないので色々読んでみた。

React CSSで悩む全ての人へ【2022年版】 | ramble - ランブル -

Pure CSS

• まあ選択肢には上がらない(スコープがコンポーネントに閉じてない)

CSS Modules

• 昨日書いたようにファイルが JS と CSS で分かれる
• 将来非推奨になる可能性について
  • 昨日はいろんなライブラリでそうなる可能性があるだろうと思っていたがどうやら css-loader の Issue で明記されていたらしい
  • Interoperability across tools and support plain JS modules imports · Issue #1050 · webpack-contrib/css-loader

CSS in JS

• 代表格として styled-components と emotion
• emotion は @emotion/styled を使うことで styled-components と全く同じ書き方に
• @emotion/react は著者の推しだが JSX Pragma を使う必要があり構築に手間がかかる

Next.js が CSS Modules を推奨する真相に迫りたい

そもそも　Next.js が CSS Modules を推している

• どうやら CSS Modules を使うことそのものが読み込まれる順番が分からないということから冪等性の担保になっているらしい
  • ただしこれは推している理由ではないみたい
• SSR 対応で CSS in JS に比べて楽(らしい)
• サードパーティを受け入れることの副産物かも

新しくnext.jsで作るプロダクトで CSS Modules か CSS in JS か決める調査や思考のログ

結構長くてちゃんと読み切れてないけど linaria という選択肢もあるらしい

どれがいいのかなあ。