ZOZOTOWN Webフロントエンドリプレイスにおける CSS in JS の技術選定で Emotion を選定した話 - ZOZO TECH BLOG

はじめに こんにちは。ZOZOTOWN開発本部フロントエンドの菊地（@hiro0218）です。 現在、ZOZOTOWNではWebフロントエンド技術のリプレイスプロジェクトが進行しています1。本記事では、WebフロントエンドのリプレイスでCSS in JSの技術選定をした際の背景や課題についてご紹介します。 既存技術スタックの課題 リプレイス以前の環境は、Classic ASPのテンプレートエンジンに依存したUI実装が多く存在しており、新規開発や変更のタイミングで実装をReact + CSS Modulesへ改修しています。そのため、レガシーな実装とモダンな実装が共存した状態です。 こういった背景から、リプレイス以前のUI開発では以下のような課題がありました。 グローバルなCSSが多く、CSSの変更がどこへ影響するのか予測しづらい Classic ASPのテンプレートエンジンに依存したUI実

[arx0balest]

tailwindは普通にキモイからNG

[mizdra]

バンドルサイズの比較面白い。一方で CSS Modules が非推奨になるかもというのは誤解だし (https://developer.hatenastaff.com/entry/2022/09/01/093000)、普通はローカルスコープで使うものだし、課題感があまり共感できなかった...

[jyuze]

“CSS in JS”

[internetkun]

Emotionの方がnpmでのダウンロード数が多いのはMaterial UI (MUIはMaterial UIを公開している団体や関連ライブラリに付与されている名前) やChakra UIがEmotionに依存しているからで純粋な利用者はstyled-componentsの方が多かったりしない？

[bellonieta]

この差ならStyled Componentsを選ぶ。てか、tailwindcss-classnamesで困ってない。

[for-my-internet-demo]

うーんどうだろうか