#はじめに
インラインスタイルとかCSSモジュールとかなにが違うんだっけと毎回調べていたのでいい加減まとめる。

#className属性によるCSS
普通のやつ。外部のcssファイルに書いてimportすることで適用。classNameを書くのがめんどくさいのと、1つのファイルで書くには量が膨大すぎる。分けようとするとどういう規則で分けるのかも考えなければならず、Reactのコンポーネント指向に従うならコンポーネントごとに作るべき。でもそれならCSS in JSでよくない？ってなる。

#インラインスタイルによるCSS
styled属性にcssを埋め込むことで適用。Reactで書く場合CSSがキャメルケースになったりしてめんどくさいのと、単純に見た目が汚くなるので好きじゃない。そもそも全部これでスタイルすることは想定してないだろうし、1行だけ適用させたい時以外はいらない。

#CSS Modules
className属性によるCSSと似ているが、違うのはCSSファイルの影響範囲を以下のReactコンポーネントを定義したJSXの中に限定することが出来る。classNameを一意なものにwebpackのツール？で変換しているっぽい。そのままのCSS使うよりはこちらの方がいいだろうが、コンポーネントごとに作るのならJSXファイルにまとめたいなあと個人的には思うので嫌。

#CSS in JS
JS上でCSSを書く。個人的には1つのコンポーネントにHTML/CSS/JS全部まとまるので一番好き。あんまり大きくなると分割しないといけないのかもしれないが、その時はスタイルコンポーネントだけ別ファイルにすれば一応できる（いいのかは置いておいて）。いろいろあるが一番人気なのはstyled-componentsじゃないかなと思っているので使っている。CSSもそのままの記法で書けるし、SASS記法も使える。

#おまけ
Material-UIなどのUIコンポーネントライブラリも便利。これだけですべて書くのはちょっと厳しいんじゃないかと思うが、１から実装するよりはこちらを使った方が早いことが多い。しかしデザインが似通ったものになるので、デザインを気にしないもの以外には使えない気もする。

#おわりに
とりあえず最初はReact + typescript + styled-components +material-UIとかで書いとけば、ある程度簡単に安全でそこそこの見栄えのwebサイト、webサービスが作れるんじゃないかと思ってる。

#参考文献
[1]:https://www.i-ryo.com/entry/2020/12/09/073749#CSS-Modulescss-loader
[2]:https://qiita.com/_likr/items/c335dec5221024ad56bc
[3]:https://morishitter.hatenablog.com/entry/2015/09/28/103334

[[1]]:ReactのCSS設定方法について調べたこと（className属性、style属性、CSS Modules、CSS in JS、CSSフレームワーク）
[[2]]:webpackのcss-loaderでCSS Modulesをやる
[[3]]:CSS Modules 所感