CSS-in-JSラウンドアップ：Reactコンポーネントのスタイリング
一緒に、累積されたGitHubスターの合計で判断された上位15のCSS-in-JSライブラリを見ていきます。 それらの機能、長所、短所を比較します。 含まれているのは、次のようないくつかの本当に新しいライブラリです。 emotion、およびいくつかのオリジナル、 aphrodite.
あなたが私のようなら、CSS-in-JSトレインに乗るのに少し時間がかかりました。 それが何かわからない場合は、 @vjeuxのオリジナルの「React：CSSinJS」スライドをチェックする価値があります。 ほぼ3年早送りし、今日では、JavaScriptを使用してReactコンポーネントのスタイルを設定するのに役立つCSS-in-JSライブラリが不足していません。 実際、これを書いている時点では、@MicheleBertoliのcss-in-jsリポジトリに55のそのようなライブラリがリストされています。各ライブラリ。 とても助かりました！
約6か月ごとに、新しいライブラリが出現します。 JavaScriptの疲労を誘発するどころか、この変化率は非常に励みになります。 それぞれの新しいアプローチは、以前のライブラリの長所に基づいて構築され、以前のライブラリのいくつかの欠点を革新します。 新しいライブラリのいくつかはより多くの機能とパフォーマンスを提供しますが、古いライブラリのいくつかの寿命についてはまだ言われることがあります。それがそれらも含まれている理由です。 次のプロジェクトでどちらを使用するかを決定するときは、このことを念頭に置いてください。
簡潔にするために、ここでは短くし、コードサンプルは含めません。 各ライブラリがどのように使用されているかを確認したい場合は、各プロジェクトのGitHubリンクをチェックして、その完全な説明を読んでください。
感情
emotion ブロックの新しい子供です。 しかし、その時代には、印象的な一連の機能を提供するだけでなく、非常に急速に勢いを増しているようです。 これは、優れた開発者エクスペリエンスとパフォーマンスへの執着のスイートスポットになります。 ここでのキラー機能は、両方のスタイル付きコンポーネントの組み合わせと、ネストされたコンポーネントに従来のセレクターを提供する機能です。 emotion 注目する価値は間違いありません。
- 年齢：3か月
- スター：1.5k⭐
- Github： https://github.com/tkh44/emotion
- タグライン：「次世代のCSS-in-JS」。 Emotionは、高性能で軽量なCSS-in-JSライブラリです。 Emotionは、実行時ではなくコンパイル中にスタイルをPostCSSで解析することにより、css-in-jsの実行時コストを劇的に最小化します。
- 機能：アニメーション、動的プロップ、メディアクエリ、ネストされたセレクター、疑似セレクター、サーバー側のレンダリング、任意のコンポーネントのスタイル設定、テーマ
グラマラス
glamorous 人気のラップ glamor ライブラリと提供 styled-component-経験に似ていますが、補間された文字列ではなくJavaScript構文を使用します。 テーマと同様に、動的な小道具は他のライブラリよりもこのライブラリにとって大きな勝利です。 JavaScript構文を使用してスタイル付きのReactコンポーネントを作成して実験したい場合は、 glamorous あなたにぴったりかもしれません。
- 年齢：6か月
- スター：2k⭐⭐
- Github： https://github.com/paypal/glamorous
- タグライン：Reactで保守可能なCSS
- 機能：動的プロップ、メディアクエリ、React Native、サーバーサイドレンダリング、任意のコンポーネントのスタイル設定、テーマ
styled-jsx
styled-jsx 追加することができます <style jsx /> コンポーネントのレンダリング関数内のタグ。 これにより、プレーンCSSでスタイルを記述でき、これらの内部のCSSは、そのレベルでレンダリングされているDOMの現在のスコープにのみ適用されるという追加の利点があります。 あなたがあなたのCSSをあなたの中に混ぜたいなら render 関数、 styled-jsx そこら中にあなたの名前があります。
- 年齢：9か月
- スター：2k⭐⭐
- Github： https://github.com/zeit/styled-jsx
- タグライン： JSX（サーバーまたはクライアントでレンダリング）の完全なスコープ付きのコンポーネントフレンドリーなCSSサポート。
- 機能：アニメーション、動的小道具、サーバー側レンダリング、テーマ設定
jsxstyle
jsxstyle 単にスタイリングの目的で使用するHTML要素について考えるのを忘れることができます（例： <div />, <span />, <table />など）、代わりにこれらのスタイル付きコンポーネントを使用します（<Block />, <Flex />, <Inline />, <Table />など）。 また、CSSの規範の多くを無視し、代わりに、疑似セレクターを小道具として指定できるという興味深い開発者エクスペリエンスを提供します（例： hoverColor). あなたが書くことの退屈を取り除くことを探しているなら <div className={styles.container} /> 100回目はチェックアウトしてください jsxstyle.
- 年齢：9か月
- スター：1.5k⭐
- Github： https://github.com/smyte/jsxstyle
- タグライン： jsxstyleは、Reactコンポーネントのスタイルを設定するための最良の方法となることを目的としています。 パフォーマンスを犠牲にすることなく、クラス最高の開発者エクスペリエンスを提供することを目標としており、既存のCSSの正統性をほとんど考慮していません。
- 機能：疑似セレクター
TypeStyle
TypeStyle はCSSのTypeScriptであるため、この名前が付けられています。 焦点は、コンパイル時のリンティング、オートコンプリートなどです。 優れた開発者エクスペリエンスを確保し、実行時の問題から保護します。 何よりも、フレームワークに依存しないため、一度学習すればどこでも使用できます。 すでにTypeScriptファンの場合は、 TypeStyle 一見の価値があります。
- 年齢：9か月
- スター：1.5k⭐
- Github： https://github.com/typestyle/typestyle
- タグライン： TypeStyleを使用したCSSの記述は、TypeScriptを使用したJavaScriptの記述と同じくらい流暢になります。
- 機能：アニメーション、メディアクエリ、疑似クラス、サーバー側レンダリング
スタイル付きコンポーネント
遠く離れて最も人気のあるCSS-in-JSライブラリ、 styled-components 問題をひっくり返します。 既存のコンポーネントにスタイルを追加するのではなく、スタイルを具体化するコンポーネントを作成します。 これにより、通常のHTML要素と本格的なReactコンポーネントの中間にある宣言型の再利用可能なコンポーネントが可能になります。 この哲学とGraphQL風の文字列補間には少し慣れが必要ですが、2位のCSS-in-JSライブラリのほぼ2倍の人気があることから、ここで一見の価値があると言っても過言ではありません。で。
- 年齢：1年
- スター：9.5k⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐
- Github： https://github.com/styled-components/styled-components
- タグライン：コンポーネントエイジのビジュアルプリミティブ。 ES6とCSSの最高の部分を使用して、ストレスなくアプリのスタイルを設定します
- 機能：アニメーション、動的プロップ、メディアクエリ、ネストされたセレクター、サーバー側レンダリング、React Native、任意のコンポーネントのスタイル設定、テーマ
グラマー
の本当の力 glamor CSSルールを記述して組み合わせることができる機能にあります。 通常、CSS-in-JSルールの拡張/上書きは面倒な場合があります。 でも、 glamor コンポーネントのプロップ内に順番にスプラットするか、コンポーネント内にリストすることができます className. 信頼できる「期待するもの」ライブラリを探しているなら、それ以上探す必要はありません。 glamor.
- 年齢：1年
- スター：2.5k⭐⭐
- Github： https://github.com/threepointone/glamor
- タグライン： reactetalのインラインcss
- 機能：メディアクエリ、ネストされたセレクター、疑似セレクター、サーバーサイドレンダリング、React Native、任意のコンポーネントのスタイル設定、テーマ
styletron
styletronの名声は、最適化、高速化、デッドCSSプルーニングなどを提供するために、JSからCSSへの変換を抽象化する「仮想CSS」（「仮想DOM」など）の使用に由来する速度です。 。 特に焦点となるのは、ページの読み込み時間を短縮するために、サーバー側のレンダリングに挿入されるCSSを最小限に抑えることです。 速度を大幅に向上させる優れた開発者エクスペリエンスを探している場合は、まず次の項目を確認してください。 styletron.
- 年齢：1年
- スター：2k⭐⭐
- Github： https://github.com/rtsao/styletron
- タグライン：ユニバーサルで高性能なJavaScriptスタイル。
- 機能：アニメーション、動的プロップ、メディアクエリ、サーバー側レンダリング、任意のコンポーネントのスタイル設定
ラジウム
radium は、メディアクエリ、疑似セレクター、および修飾子の処理の問題を解決しようとする元のCSS-in-JSライブラリの1つでした。 それは今でも最も人気のあるライブラリの1つであり、その実用性と寿命を物語っています。
- 年齢：2年
- スター：5.5k⭐⭐⭐⭐⭐
- Github： https://github.com/FormidableLabs/radium
- タグライン：ラジウムは、React要素のインラインスタイルを管理するためのツールのセットです。 CSSなしで強力なスタイリング機能を提供します。
- 機能：アニメーション、メディアクエリ、疑似セレクター、サーバー側レンダリング、任意のコンポーネントのスタイル設定、テーマ
CSSモジュールを反応させる
react-css-modules Reactコンポーネントで純粋なCSSを記述できるようになるので近いです。 文字通り、あなたはインポートします .css ファイルとそのキーを className 小道具。 最初のCSS-in-JSライブラリの1つとして、それが解決しようとしていた主な問題は、CSSセレクターのスコープでした。 babel-plugin-react-css-modulesがあなたのニーズを満たすかどうかを確認する価値があります。 機能は少ないですが、パッケージがはるかに小さく、パフォーマンスがはるかに高くなっています。
- 年齢：2年
- スター：4k⭐⭐⭐⭐
- Github： https://github.com/gajus/react-css-modules
- タグライン： React CSSモジュールは、CSSモジュールの自動マッピングを実装します。 すべてのCSSクラスには、グローバルな一意の名前を持つローカルスコープの識別子が割り当てられます。 CSSモジュールは、モジュール式で再利用可能なCSSを可能にします。
- 機能：ネストされたセレクター、疑似セレクター
アフロディーテ
aphrodite カーンアカデミーの善良な人々によって書かれ、維持されています。 元のCSS-in-JSライブラリの1つとして、解決しようとした主な問題は、CSSパリティを取得することでしたが、JavaScript構文を使用することでした。 そのため、セレクター、メディアクエリ、アニメーションなどに焦点が当てられています。 あなたが確立されたメンテナの長寿を持っている尊敬されている図書館を探しているなら、 aphrodite JSライブラリの嵐のアンカーになる可能性があります。
- 年齢：2年
- スター：3.5k⭐⭐⭐
- Github： https://github.com/Khan/aphrodite
- タグライン：フレームワークに依存しないCSS-in-JSで、サーバー側のレンダリング、ブラウザーのプレフィックス、最小限のCSS生成をサポートします
- 機能：アニメーション、動的プロップ、メディアクエリ、サーバー側レンダリング
ReactCSS
オリジナルのCSS-in-JSライブラリの1つとして、 reactcss 小道具に基づいてスタイルを動的に交換することに焦点が当てられました。 これは多くの新しいライブラリの機能ですが、これは当時の時代に先駆けた機能であったことに注意してください。 特に完全なCSSサポート（自動プレフィックスを含む）またはReact Nativeサポートが必要な場合は、まだ検討する価値があります。
- 年齢：2年
- スター：1.5k⭐
- Github： https://github.com/casesandberg/reactcss
- タグライン： React、React Native、Autoprefixing、Hover、Pseudo-Elements、MediaQueriesをサポートするJSのインラインスタイル
- 機能：動的プロップ、メディアクエリ、React Native
👉@MicheleBertoliとcss-in-jsの他のすべての貢献者に感謝します。
