2023年のゼロランタイムCSS in JSを考える by 0yu

2023年には、vanilla-extractやlinariaなどのゼロランタイムCSS in JSが多く登場しました。従来のCSS in JSでは、JSによる動的なスタイリングが行われるため、レンダリング時のオーバーヘッドが課題でした。ゼロランタイムは、ビルド時にCSS in JSのコードからCSSを抽出することで、ランタイムオーバーヘッドを取り除く仕組みです。

Panda CSSやKuma UIなど、ビルド時の静的解析と、レンダリング時の動的実行を両立させるハイブリッドなCSS-in-JSも登場しました。フレームワークの技術選定には一つのベストプラクティスは存在しませんが、適切な選択肢を理解することは非常に有益です。

それぞれのライブラリを実際に使用し、パフォーマンスや使いやすさの観点で定量・定性的に評価した結果についてお話ししたいと思います。