ReactでjsファイルごとにCSSをimportする理由を教えてください

Question

create-react-appでプロジェクトを作成したときに、最初からindex.jsとApp.jsにcssファイルがimportされていますがどうしてでしょうか？

index.jsにすべてのcssをまとめて読み込むのではなにか不都合があるのですか？

ご回答いただければ幸いです。

Answer 1

CSS Modulesに対応しているので、コンポーネントごとにcssを読み込むとcssの影響範囲が擬似的にそのコンポーネントのみになります。

index.jsにすべてのcssをまとめて読み込むのではなにか不都合があるのですか？

ざっくり書くと、まとめて読み込むとスタイル名の重複が起きたり、それによる想定しないスタイルの変更が起きることが考えられます。

Comments

[mt6]

デフォルトでCSS Modulesが使えるようになっているのですね。CSSは設計して一つのファイルで読み込むものと思っていたので大変勉強になりました。コンポーネントごとに名前を気にせずスタイルをあてられるのは便利そうですね。これから使ってみたいと思います。
ご回答いただきありがとうございました。