Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

yud0uhu
November 17, 2023
4.4k

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

フロントエンドカンファレンス沖縄2023のLTスライド資料です
https://frontend-conf.okinawa.jp/

yud0uhu

November 17, 2023
Tweet

More Decks by yud0uhu

Transcript

  1. 最近の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 が使われている
  2. Kuma UIについて Kuma UIについて i ヘッドレスなUIコンポーネント集とゼロランタイムで動くCSS in JS を兼ねたライブラ ™

    i ビルド時に決定できるスタイルを静的に抽出し、動的に変更される可能性のあるスタ イルに対しては実行時にDirty Checking を行なうことで、ハイブリッドなアプローチ を実 i ヘッドレスUIコンポーネントを兼ねるため、独自のデザイントークンの組み合わせも 可能
  3. 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で補って開発を 行う方針