レシピサービスのフロントエンドに CSS in JS を採用した話 - クックパッド開発者ブログ

こんにちは。技術部クックパッドサービス基盤グループのkaorun343です。我々のチームでは レシピサービスのフロントエンドを Next.js と GraphQL のシステムに置き換えている話 にて紹介したとおり、レシピサービスを Next.js ベースの新システムへと移行しています。今回はこの新システムの CSS の話 です。 背景 クックパッドのレシピサービスを Next.js と TypeScript で置き換えはじめた当初、CSS については Next.js に標準で組み込まれているCSS in JS ライブラリである styled-jsx を使っていました。プロジェクトが大きくなりはじめたタイミングで 「CSS の技術選定を考えなおしてもいいかもしれない」とチームの中で話し合い、改めて技術選定をしました。 技術選定 結論として、本システムでは CSS in JS ライブラリのem

[kzbe]

“emotion は、ESLint や TypeScript コンパイラといった JavaScript 向けの静的解析ツールにより、未使用の CSS を簡単に検出できます。”

[inouetakuya]

“2点目は静的解析がしやすいという点です。CSS Modules や styled-jsx では... 問題点は、クラス名を間違っていたとしても実行するまで気づくことができないこと、未使用のスタイルを静的解析により検出することができない”

[tkmkg8m]

わかりみが深いと思いながら諸々の判断基準を読んだ

[mizdra]

良い

[mami-hate]

ちゃんと読む。

[efcl]

emotionを使ったCSS-in-JSについて。 styled-componentsの記法ではなくString Stylesを採用した理由、stylelintを使ったLint、Jestを使ったスナップショットテストについてなど

[forest1040]

CSS in JS でemotionを採用。Material-UIでもV5からemotionが推奨されるようになるはず