概要

このセクションでは、EffCSSの基本概念を解説し、類似の手法と比較検討した上で、EffCSSをいつ使用すべきかを判断します。

また別のCSS-in-JS？

簡単に言うと、そうです。EffCSSは、複雑で予測可能なスタイルを簡単に作成できるツールを目指したCSS-in-JSライブラリです。このライブラリは、いくつかの抽象化に基づいています。

StyleSheet makerは、ユーティリティを含むオブジェクトを引数として受け取り、スタイルを含むオブジェクトまたは文字列を返すJavaScript関数です。ユーティリティには、擬似セレクタ、アットルール、BEMセレクタなどを生成する便利な関数が含まれています。
Style providerは、クライアント側で動作するカスタムHTMLScriptElementで、サーバー側でエミュレートすることで、あらゆる場所でスタイルシートメーカーを処理・管理できます。

また、一般的なブラウザAPIも利用しています。

その結果、EffCSSは外部依存関係を一切必要としません。すべての最新ブラウザとあらゆるフレームワークで同様に動作します。

クライアント側でのCSS生成 - Style provider を介してクライアント側でスタイルシートを動的に使用できます。
サーバー側でのCSS生成 - Style provider は、SSR/SSG に使用できる HTML 文字列に状態をシリアル化できます。
CSS切り替え - 生成されたスタイルシートは、Style provider の on/off メソッドを使用してオン/オフを切り替えることができます。
テーマサポート - テーマは、Style provider オブジェクトの theme プロパティから取得できるテーマコントローラオブジェクトを使用して作成/更新/削除できます。
TypeScript 対応スタイルシート - スタイルシート作成ツールが TypeScript 型を使用している場合、Style provider はセレクタを自動補完で解決できます。
分離および最小化されたセレクタ - 各スタイルシート作成ツールは、一意のプレフィックスを持つセレクタを返す select ユーティリティを使用できます。また、Style provider の min 属性を使用してセレクタを最小化することもできます。

プリプロセッサは独自の構文と関連する制約を提供します。EffCSSを使用すると、最新のJavaScriptとTypeScriptを自由に利用できます。

Tailwindはユーティリティを操作し、構文ハイライトとオートコンプリートのためにエディタの設定が必要です。EffCSSはスタイルシートを操作し、TypeScriptのジェネリクスを介してセレクタのオートコンプリートを可能にします。

@emotion/css は依存関係があり、場合によっては関連するエコシステム（@emotion/react、@emotion/styledなど）の他のパッケージを必要とします。EffCSS は自己完結型で依存関係がなく、すべての場合において同じように動作します。

Styled ComponentsはReactコンポーネントのスタイル設定用に設計されています。EffCSSはフレームワークに依存しません。

Linariaはランタイムライブラリではありません。EffCSSはどこでもCSSを生成します。

ライブラリの選択は好みの問題です。実際、他にもいくつかの理由が考えられます。

次のような場合

次のような場合

少なくとも一つでも気に入ったものがありましたか？それでは、早速始めましょう！