CSSModules vs styled-components

2018-10-25

以前ブログで少しだけ触れましたが、React でスタイリングを行う場合、現時点ではCSSModulesstyled-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とか、スタイルでプロジェクトがカオスなことになっています。

まぁ、正直どっちもどっちです、両方のメリットだけを扱うモジュールとかできないかなぁ…。

© 2018 kk-web