CSS-in-JS

'CSS-in-JS'はstyled-componentsから始まるフローで、StylingをJavascript内部で定義します。

styled-component、Emotion、Mantineなどがあります。

利点

1. 適用されるスコープが小さい。
   1. css moduleを使用すると、cssもスコープを減らすことができます
2. コンポーネントと同じ場所で定義されます。 (colocation)
3. Javascript Variable を使用可能。

欠点

1. ランタイムオーバーヘッドがある
2. Css in JS libraryファイルをダウンロードする必要があります。
   1. Emotionは7.9KBです。
   2. Mantineは134KB！

大きな欠点

1. CSSルールを頻繁に入れると、多くの計算作業が発生します。
   1. Emotion と Css を比較したところ
   2. Css使用時約50パー程度の性能増加があった。
SSRを書くと、さまざまな問題が発生する
2. Emotionレポが見ると問題が多い。

セットアップ

• パフォーマンス測定はReact dev toolを使用します。
• 性能測定対象は30 * 5のTable（コンポーネント名：SheetTable）である。
• 画面

実験の進行

ボタンを押すと上記の画面がレンダリングされます。

• SheetTableのレンダリング時間を測定します。
• 合計5回ずつ実行して平均を求める。
CSS-in-JS (Mantine)

セルコードひとつ変えたのに性能向上が大きかった。 （もちろんセルがほとんど勝つ）

60Hzモニターで1フレームが16msなのに3frame -> 2frameになったもの
結論

スタティックに生成されるCSSを使用するのはパフォーマンスの面でかなり良いです。

JS変数を使用する必要がない場合は、Tailwindを書きましょう。

(追加)SSRを導入するにはCSS-in-JSを捨てるのが楽だ。
Ref
[1] https://dev.to/srmagura/why-were-breaking-up-wiht-css-in-js-4g9b