Svelte で CSS-in-JS を使用する

CSS は、ウェブアプリケーションのコア部分です。拡張して言えば、UI フレームワークにはコンポーネントにスタイルを追加する組み込みの方法がない場合、未完成ということになります。

Svelte ではコンポーネントの <style> タグに CSS を追加できるようになっているので、この問題が起きません。CSS をマークアップと併置することで、CSS を書く際に開発者が直面する最大の課題を、新しい課題を導入せずに解決でき、快適な開発エクスペリエンスを提供できます。

しかし、Svelte のスタイル処理にはいくつかの制限事項があります。コンポーネント間でスタイルを共有したり、アプリレベルの最適化を適用することが非常に困難です。これらの問題は今後のバージョンで対処する予定ですが、それまでの間、これらの機能が必要な場合は、フレームワークに依存しない CSS-in-JS ライブラリを使用できます。

たとえば

ここでは、Emotion を使用して複数のコンポーネントで使用できるスコープ指定されたクラス名を作成しています。

ほとんどの CSS-in-JS ライブラリにはランタイムライブラリがあり、その多くはビルド時にスタイルを静的に抽出して別の .css ファイルに出力することをサポートしていないことに注意してください（これは最高のパフォーマンスを得るために不可欠です）。そのため、CSS-in-JS はアプリケーションに不可欠な場合にのみ使用してください。

組み合わせて使用できることに注意してください。Svelte の組み込み CSS 処理を、CSS-in-JS ライブラリと一緒に引き続き使用できます。