CSSModules vs styled-components
2018-10-25
以前ブログで少しだけ触れましたが、React でスタイリングを行う場合、現時点ではCSSModulesかstyled-componentsのほぼ二択になっていると思います。
どちらかといえばstyled-componentsが優勢な気がしますが、両方じっくり使ってみて、どちらにもメリットデメリットがあったので、書き残しておこうと思います。
CSSModules
メリット
- 親子でクラス名が 100%被らないため、記述が容易
- sass が扱えるため、記述がシンプル
デメリット
- css ファイルを扱うため、loader などの事前準備が必要
- className に変数を指定するため、記述が多少冗長的
- props を扱えないため、ロジックが複雑化 する
styled-components
メリット
- js や ts ファイル のため、事前準備が不要
- そのため、ducks もいける
- props を扱えるため、ロジックがシンプルになる
- TypeScript の場合、型セーフで書ける
- スタイルの継承が楽
デメリット
- 1DOM ごとに style を切らない場合、親子でクラス名が被る恐れがある
- 1DOM ごとに style を切る場合、膨大にファイルが作成される
個人的には、CSSModulesの方が 勝っているような気がしました。
styled-componentsと比べて、確かに loader の準備は面倒ですし、利便性も劣るのですが、とかくファイル数が少なく済むのと、sass が扱えるのは非常に魅力的です。
また、className が絶対に被らないのが一番大きいかなと、 これは自分の適当な性格が大きいですが。
特に、大規模プロジェクト になればなるほど、styled-componentsだと苦しくなってくるような気がします、融通はきくんですが、ちょっと頑固すぎる感じが…。
react-boilerplateとか、スタイルでプロジェクトがカオスなことになっています。
まぁ、正直どっちもどっちです、両方のメリットだけを扱うモジュールとかできないかなぁ…。