ReactやNext.jsでのCSSまわりがよくわからなかったので、ちょっと調べたのでメモがわりにまとめます。 実際に全部触ったわけではないので、触るのはまた別途やろうかなと思います。

調査内容

下記の（主にパフォーマンスまわりの）特徴や違いなどを調査しました。

• CSS-in-JS
• Tailwind CSS
• CSS Modules
• ゼロランタイムCSS-in-JS

CSS-in-JS

• JS内でスタイルを定義、実行時にスタイルを適用することができる
  • クライアント側で動的にスタイルを変更できる
• Reactにおいては、Styled ComponentsやEmotionなどが該当
• Reactでは以下のようなメリットがある
  • コンポーネント内に定義できてそれ単体で完結できる
  • propsなどでスタイルを切り替えることができたりする
  • ESLintなどで未使用のスタイルが見つけやすかったりもする
• クライアント側に処理を任せるため、パフォーマンス的に問題が出ることもある。

Tailwind CSS

• 事前に定義されたクラスをhtmlに適用することで、スタイルを適用することができる
• ビルド時に未使用のクラスを除外したCSSを生成し、静的にスタイルを適用する
  • 通常設定であればビルド時にCSSを作るので、ランタイムオーバーヘッドはない

CSS Modules

• コンポーネントごとに.module.cssのようなファイルをおき、クラス名をローカルスコープに区切りスタイルを当てることができる
  • ファイルが増えやすいという難点がある
• こちらもビルド時にCSSを生成し、静的にスタイルを適用する

ゼロランタイムCSS-in-JS

• ビルド時に静的解析を行いCSSを各JSから抽出したうえでCSSを生成し、静的にスタイルを適用する。
• 書き方はCSS-in-JSと同様、JS内でスタイルを定義できるため、以下のメリットは引き続き享受できる
  • コンポーネント内に定義できてそれ単体で完結できる
  • ESLintなどで未使用のスタイルが見つけやすい

結局どれが良さそうなのか

• CSS-in-JS以外は、ビルド時に静的なCSSファイルを生成して、適用するという動作としては共通している
• React単体であれば、アプリケーションの特性によってはCSS-in-JSを採用しても良い
  • パフォーマンスが厳しく求められない
  • propsなどで渡す値によって動的にスタイルを変えたい
• Next.js(App Router)でRSCをメインで使いたければCSS-in-JSは避けた方が良さそう
  • 書き方の好みによって変えても良さそう