reactJSではどのようにCSSを使うべきですか？

Question

私はES6とreactJSに新しいですし、CSSについて多くを読み、彼らが解決しようとしている問題は、グローバルstyle.cssで、代わりに多くのことを主張

スタイル/ index.js

var styles = { 
    transparentBg: { 
    background: 'transparent' 
    } 
}; 

を使用しています何百ものCSSクラスを持っていなければ、別のファイルではなく、各クラスのCSSに戻って（上記のコードでは、CSSに何が反応するのかわかりません）これは変だと感じます。本当ですか？

多くのCSSフレームワークは、人気の高いブートストラップがまだ「古い」CSSになっているためです。それは問題ですか？アプリケーションがまだ動作していることを知っていますが、このようにするために選択された反応がある必要があります。それについて何かできますか？

ReactJSでCSSおよびCSSフレームワークを使用する場合のベストプラクティスは何ですか？

Answer 1

リアクションにCSSを書き込む「正しい」方法はありません。私はあなたにいくつかの選択肢を与え、彼らに試してみて、あなたのために最高のものを選んでください。リアクトため

インラインCSS：
AphroditeとRadium

それとも、.cssファイル使用し続けることができます： サス、以下、スタイラスやPostCSSを。

Answer 2

多くの主観的ですが、古典的な.cssを多分いくつかのプリプロセッサで使用することをお勧めします。私はそれが完全に移植可能で、そのすべてのロジックとスタイルを含むという約束に従うことが気に入っていることを知っていますが、私は作成されたものに対してCSSを使うのが最もクリーンなアプローチだと思っています。

コードベースはより読みやすく、古典ワークフローのサポートとリソースは常に増えます。

Answer 3

これは主観的ですが、私の意見では、CSS ModulesとPostCSSで従来のCSSを使用する方がより現実的です。 CSSモジュールの魔法で

import React from 'react'; 
import s from './Button.css'; 

function Button() { 
    return (
    <button className={s.btn}><i className={s.icon} />Click Me</button> 
); 
} 

export default Button; 

：

.btn { 
    border: 1px solid black; 
    border-radius: 2px; 
} 

.icon { 
    background: url(...); 
} 

次のようにcss-loader?modules=trueを経由して反応させ、コンポーネントを使用している：たとえば、あなたがこのようなCSSファイルを持っているかもしれ

コンポーネントは、デバッグ（開発）モードで次のHTMLマークアップにレンダリングされます。

<button class="Button_btn_d41d8"><i class="Button_icon_7b91e"></i>Click Me</button> 

各CSSクラス名は<ComponentName>-<ClassName>-<Hash>で構成され、複数のコンポーネントにわたって同じ名前を持つCSSクラス名の競合を効果的に回避します。

各クラス名はちょうど4-5文字の長ハッシュ文字列である

<button class="d41d"><i class="7b91"></i>Click Me</button> 

：そしてリリース（本番）環境で、同じコンポーネントがにレンダリングされます。

これは、React Starter Kit（免責事項：私は著者だ）でどのように動作するかである。この質問は広すぎる、意見ベースのいずれかであるかの議論が必要となるので、スタックオーバーフローのためにオフトピックです