CSS-in-JSについていろいろ調べてみた【備忘録】

はじめに

自作アプリを作っている途中でcss-in-jsについて知らないことが多すぎて、調べた。

それをまとめただけ。

調査

食べログさんのを勉強

note.com

• CSS modules
  • 利点
    • パフォーマンスに優れている
    • グローバルなスコープを作らない
    • 記述内で競合することがほぼない
  • いろんなところで使わている
  • nextJSも推奨
  • だけどdeprecatedになった
• Styled Component
  • なんかいいらしい

styled componentsについて

zenn.dev

• styled componentsの特徴
  • レスポンスの改善につながる
    • レンダリングされたコンポーネントだけのスタイルを取り込むから早い
  • 単一のクラス名をstyled-componentsが作成してくれる
  • styleを作りたいときはコンポーネントを作らないと行けない
  • スペルミスなどはエラーを出してくれる
  • コンポーネントベースなので、参照などが容易

zozoさんを参考

techblog.zozo.com

• CSS Modules
  • cssとjsのファイルが別なので管理コストがかかる
  • スタイルの優先度に保証がない
• Linaria
  • Zero-runtime CSS in JS
  • Styled ComponentsやEmotionと同じ構文
  • 動的なスタイルを使用した場合にCSS Custom Propertiesを出力するため、多用するとCSSが肥大化する
  • 動的なスタイルの値がundefinedのときに不要なプロパティが残る
  • 同じコンポーネントをネストすると、再利用されたCSS Custom Propertiesが上書きされてしまい、意図した動作をしない
• styled componentsとEmotionの比較
  • 機能はほぼ同等にいろいろ使える
  • 人気度はほぼ変わらん
  • 通信速度はややEmotionが勝る
  • バンドルサイズもややEmotionが勝る
• CSS in JSの良さ
  • スタイルがコンポーネントに紐づくため、関心の分離ができる
  • CSSクラス名が自動生成されるので、コンポーネント同士が影響しあわない
  • JSの変数・関数と統合できるので、動的なスタイリングがしやすい

ChatGPTに聞いてみた

Q. もしかしてCSS Modulesはcss-in-jsではないの？ A. CSS Modulesは、CSSをモジュールとして扱うことによって、CSSの名前空間を自動的に生成し、スコープを限定することができるCSSのアプローチです。これは、CSSをJavaScriptのモジュールとして取り扱うことで実現されますが、厳密に言えばCSS-in-JSではありません。 一方、CSS-in-JSは、JavaScriptの中にCSSスタイルを定義し、ランタイム時にスタイルを適用するアプローチです。これは、JavaScriptを使用して動的なスタイル変更を実現するため、コンポーネントベースのアプリケーションでよく使われます。代表的なCSS-in-JSライブラリには、styled-componentsやEmotionがあります。 CSS ModulesとCSS-in-JSは、いずれもCSSの名前空間を自動的に生成し、スコープを限定することができる点で共通していますが、アプローチが異なります。CSS Modulesは、CSSファイルをJavaScriptのモジュールとして扱うことでスコープを生成するのに対し、CSS-in-JSはJavaScriptのコード内にスタイルを直接記述することでスコープを生成します。

引用元：Chat GPT

CSSファイルをjavascriptのモジュールとして扱うのが、CSS Modules。 css-in-jsはjsに直接cssを書くこと。

Stitchesってどうなんやろ

zenn.dev

• Stichesの特徴
  • TSで型安全にかける
  • 速い
  • とにかくいろんなところで補完が効く

と、こんな感じで終わりましょか。