CSS-in-JSのパラダイムシフト

2023年現在、Reactでは多種多様なスタイリング手法が用意されています。 代表どころで言うとCSS ModulesやTailwind、CSS-in-JSなどが有名です。筆者の個人的な好みでは、これらの選択肢の中でもCSS-in-JSを用いたスタイルが特に好きですが、CSS-in-JSライブラリ群の中にはランタイムでスタイリング処理がなされる為にパフォーマンス上の問題を抱えているとの指摘を受けているものもあり、最近は人気が下火になっているように感じています。 そこで本記事では、CSS-in-JSが生まれた背景から遡り、各ライブラリの内部実装を確認しながらそれぞれのライブラリの仕組み・メリット・問題点を明らかにし、CSS-in-JSのパラダイムシフトを追ってみたいと思います。 CSS-in-JSの登場 CSS-in-JSという言葉が最初に公の場で登場したのは、2014年にFacebookの

[Cherenkov]

俺は好かん css-in-js。ネイティブでできるようになってから起こしてくれ

[tech0403]

CSS-in-JSが人気とか書いてるが、最初から見切りを付けてる人達も相当数いる。文字列としてCSSを記述する事の前時代感。開発中は補完も効かないし、実行時はスタイル適用が遅れるというポンコツっぷり

[cpw]

正直デバッグとかいろいろ考えるとHTMLにはcssクラス名が静的に吐かれてほしい。cssのクラス名がコンポーネントを特定するのに役立ってるんだよね。いろいろ考えるとscssくらいがちょうどよいと思ってる。

[stibbar]

https://techlife.cookpad.com/entry/2021/03/15/090000

[ryosuke-fujii]

わかりやすかった。UtilityFirstでstyled-componentっぽく書けるゼロランタイムなCSS-in-JSが欲しい

[Funyapu]

JSXもCSS-in-JSも、SQL文をVC層にいれこんでるようにしか見えん

[w_bonbon]

便利で使ってたけどあまりにwebpackみたいなバンドルツールへの依存が強いと標準から離れすぎてあれだなぁって思って一周回ってclassName+普通のpostCSSに戻ってきてしまったw

[shimarisugi]

そういえばmetaのstylexってどうなったんだろう

[azzr]

00年代前半頃のIEとNetscapeがそれぞれ独自拡張してた時代にそんなのがあったような。

[jay-es]

"動的なスタイリング処理はインラインスタイル内で行うべき"

[mumei-0]

Zero-runtime CSS-in-JS のLinaria や vanilla-extract が出てきてから、相対的に runtime CSS-in-JS の Emotionやstyled-components が少し古い技術になってしまった。

[manaten]

思想上の理由でcss-in-js嫌いだったけど、書いてみると開発体験が一番良かったんだよな。パフォーマンスが一番よくないことももちろんわかる

[yarumato]

“Reactでは多種多様なスタイリング手法。CSS-in-JS各ライブラリの内部実装を確認しながら、それぞれのライブラリの仕組み・メリット・問題点を明らかに”

[boxshiitake]

スタイル適用が遅れるとかパフォーマンスが悪いとか中身を読んでないブコメだらけだ