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の名声は、最適化とスピードアップを提供するためにJSからCSSへの変換を抽象化する「仮想CSS」（「仮想DOM」など）の使用に由来する速度です。、デッドCSSプルーニングなど。特に焦点となるのは、ページの読み込み時間を短縮するために、サーバー側のレンダリングに挿入される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の他のすべての貢献者に感謝します。