CSS-in-reacctingの風景

多くのCSS-in-JSライブラリは、理論的には属性に依存していますが、Reactプロジェクト内での主要な使用を見つけます。これは主に、Vue、Svelte、またはAngularとは異なり、Reactの組み込みスタイリングソリューションの欠如によるものです。この「持ち込み」アプローチは柔軟性を提供しますが、スタイリング戦略の選択が必要です。プレーンCSSは依然として実行可能なオプションですが、CSS-in-JSライブラリは次のような利点を提供します。

• コンポーネントとのスタイルのコロケーション
• コンポーネントスコープスタイル
• プロップ駆動型スタイリングのバリエーション
• CSS内のJavaScript統合
• テーマ機能

各ライブラリは、多くの場合、上記のバリエーションまたは拡張機能、多くの場合、ユニークな機能を提供します。重要なことに、スタイルオーサリングのためにJavaScriptを使用すると、JavaScriptベースのスタイルの配送を常に意味するとは限りません。 「ゼロランタイム」ライブラリは、ビルドプロセス中にスタイルをCSSにコンパイルし、パフォーマンスを向上させます。

この概要は、CSS-Tricksの公式学習パートナーであるFrontend Mastersによってサポートされています。

フロントエンド開発トレーニング

FrontEnd Mastersは、高度なReactトレーニングを含む、リードフロントエンドテクノロジーに関する包括的なコースを提供しています。

中間反応コースを検討してください

ライブラリを探索する前に、注意してください：

• 各ライブラリでの私の経験はさまざまです。 CSSモジュールは私の最も広範囲です。デモは基本です。
• コメントまたは連絡先フォームから修正と追加を歓迎します。
• 目標は、簡単に参照できる機能コードの例を提供することです。

含まれるフレームワーク

• スタイルのコンポーネント
• CSSモジュール
• 感情
• ステッチ
• バニラ抽出物
• JSS
• リナリア
• スタイルJSX
• グーバー

図書館の要約

スタイルのコンポーネント：非常に人気があり、動的なスタイリングとプロップベースのバリエーションで知られています。 Object構文もサポートされていますが、CSSに似たテンプレートリテラル構文を使用します。 SSRを提供しますが、「ランタイムゼロ」ではありません。

CSSモジュール：シンプルでスコープスタイルとコロケーションを促進します。その重要な機能は構成です（ミックスインのようなクラスの組み合わせ）。これは、CSSが抽出されたときに真の「ゼロランタイム」機能を提供するビルドプロセスのみのソリューションです。 HMRで動作し、SASSと互換性があります。 next.jsに統合

感情： JavaScriptを使用したCSSスタイリングを可能にし、スタイルの構成、ソースマップ、ラベル、テストユーティリティを提供します。文字列スタイルとオブジェクトスタイルの両方をサポートします。スタイルのコンポーネントに似ていますが、潜在的なパフォーマンスの違いがあります。 SSRをサポートしていますが、ゼロランティムではありません。華やかな、魅力、魅力は感情を支持して非難されます。

ステッチ：堅牢なバリアントAPI、優れたタイプスクリプトエディターの統合、テーマのサポート、ユーティリティの作成が備わっています。 SSRはゼロルーチムに近づいていますが、CSSファイルを直接生成しません。

バニラ抽出：主にSSRソリューション。特定のランタイム機能が有効になっていない限り、「ゼロランタイム」。優れたタイプスクリプトエディター統合、バリアントAPI、レシピAPI（ステッチに似ています）を提供します。スプリンクルを介してテーマとユーティリティのクラスをサポートします。現在延期されているアフロディーテに代わる強力な代替品。

JSS： React統合、拡張構文、プラグインアーキテクチャが含まれます。

Linaria： 「Zero Runtime」CSS-in-JSの先駆者、CSSファイルにコンパイルしますが、動的要素のランタイムを保持します。 APIのスタイルのコンポーネントに似ています。重要なCSSをサポートします。

スタイルのJSX：ビルドプロセスが必要なバベルプラグイン。 aを使用します

Goober: A lightweight (1.25KB) library with a feature set similar to styled-components and Emotion.

Additional Resources

• Shopify's library selection research.
• Facebook's in-development "StyleX" (currently un-open-sourced).
• "Style9," a library aiming to replicate StyleX's features.
• Tailwind CSS (with just-in-time mode) for atomic CSS.
• Styled System, a React-oriented approach to atomic styling.
• Twin, another React-friendly atomic styling solution.
• CSS-in-JS Playground, showcasing various libraries including Fela and Radium.

1. "TypeScript editor experience" refers to TypeScript's code completion capabilities, enhancing developer workflow in editors like VS Code.

以上がCSS-in-reacctingの風景の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。