2023年のゼロランタイムCSS in JS⚡️ を考える

2023年のゼロランタイムCSS in JS ️ を考えるフロントエンドカンファレンス沖縄2023 0yu@yud0uhu

0yu(おゆ) E 合同会社DMM.com 23新 E Webフロントエンドエンジニ E 猫と甘いものと映画が好き自己紹介 @yud0uhu
@yud0uhu

CSSフレームワーク何を使っていますか？

最近のCSSフレームワーク事情最近のCSSフレームワーク事情 Next.jsのサポートするスタイリングアプローP v Global CS7 v CSS ModuleH v
Tailwind CS7 v SasH v CSS-in-JS Learn Next.js のサンプルコードはCSS Modules or Tailwind CSS が使われている

最近のCSSフレームワーク事情認知度

最近のCSSフレームワーク事情利用率

最近のCSSフレームワーク事情興味度

最近のCSSフレームワーク事情満足度

技術調査の背景

技術調査の背景技術調査の背景社内のとあるプロジェクトでEmotionを使っていU EmotionをはじめとしたランタイムCSS-in-JSでは、スタイル描画によるパフォーマンス上のオーバーヘッドが肥大化する懸念があっU そもそもApp RouterはEmotionに対応していなV
このような課題を解消するため、新たなCSS環境への移行を検討

評価観点

評価観点評価観点 2 パフォーマン& 2 学習コス! 2 Next.js(SSR)環境で問題なく使えること

CSS-in-JSにおける選択肢

CSS-in-JSにおける選択肢ランタイム or ゼロランタイム or ハイブリッド

技術選定調査のために行ったこと

01 選定ライブラリの検討 02 リファレンスコードの作成 03 パフォーマンス測定の実施 04 チーム内フィードバック技術選定調査のために行なったこと

01 選定ライブラリの決定

選定ライブラリの決定選定ライブラリの決定 " CSS Module " Kuma U " Panda
CS# " Linalia

02 リファレンスコードの作成

リファレンスコードの作成リファレンスコードの作成 A 各種ライブラリを用いてボタンコンポーネントを実装し、リファレンスコードを作成

リファレンスコードの作成観点の洗い出し

03 パフォーマンス測定の実施

パフォーマンス測定の実施パフォーマンス測定の実施比較のため、各種ライブラリ導入下でベンチマーク測定を実Y 5000枚のダミーイメージをレンダリングするコンポーネントを作成し、レンダリングにどの程度の時間を要したかを計測・評C 検証に使用したリポジトf 7
https://github.com/yud0uhu/css-optimization-benchmarks

パフォーマンス測定の実施パフォーマンス測定の実施

04 チーム内フィードバック

チーム内フィードバックチーム内フィードバック r チーム内デイリーでパフォーマンスの計測結果とリファレンスコードを提示し、メンバーからフィードバックをもら1 r Panda CSS派とKuma UI派で割れe r
結果、Kuma UIの導入を検討することに

Kuma UIについて

Kuma UIについて Kuma UIについて i ヘッドレスなUIコンポーネント集とゼロランタイムで動くCSS in JS を兼ねたライブラ
i ビルド時に決定できるスタイルを静的に抽出し、動的に変更される可能性のあるスタイルに対しては実行時にDirty Checking を行なうことで、ハイブリッドなアプローチを実 i ヘッドレスUIコンポーネントを兼ねるため、独自のデザイントークンの組み合わせも可能

Kuma UIについて Kuma UIについて z 既存コードにEmotionに依存した動的スタイル処理が多 z css APIやstyled APIを使うとEmotionライクに書くことができるが、現状ハイブリッ
ド環境で動作するのはUIコンポーネント + Utility propsを使う記法の( z そのため、基本的に置き換えはUtility propsで行~ z Utility propsは一部のCSSプロパティが非対0 z :-webkit-scrollbar な# z このようなプロパティは公式のサポートを待ちつつ、CSS Modulesで補って開発を行う方針

最後に最後に 7 Kuma UIや他のCSSライブラリの導入事例などあれば、ぜひ懇親会でお話ししましょう！

2023年のゼロランタイムCSS in JS⚡️ を考える

2023年のゼロランタイムCSS in JS⚡️ を考える

yud0uhu

More Decks by yud0uhu

Featured

Transcript