Zenn
Closed3

styled-componentsとCSS Modulesの比較

CSS Modules
styled-components
yagi_engyagi_eng
  • pureCSSからの移行を想定
  • 両方ともちょこちょこっと触ったくらい
  • あくまで個人の感想

比較

O, Xの2択評価

styled-components CSS Modules
規約・実装方針の
決めやすさ		 O X
CSS設計色がより強い
実装の単純性 O X
同上
実装の工数 X
1.3倍くらいはかかりそう
（肌感覚）		 O
保守性 O X
可読性 O X
学習コスト X
少しだけ		 O
ほぼなし
市民権/開発状況 O 最近の流行 X メンテナンスオンリー？
（頻繁にアップデートされているが。。）

全般的な参考

yagi_engyagi_eng

styled-components

諸々

  • 実装してみた所感
    • 規約をある程度決めてから実装しないと、結局保守性・可読性は悪くなりそう
    • スタイルを後付けするのではなく、スタイルを持ったUIの構築ができるのは好き
    • 一方で膨大な数のstyled-componentが出来上がるので、管理しきれるかは運用してみないとわからない
      • ローカルスコープだから気にならない？
      • スパゲッティCSSよりはマシか
    • 汎用コンポーネントを作る時は、基本的にprops渡しで良さそう
    • themeの有効性
  • 辛い点
    • ただただ1つ1つstyled-componentsに変換していくのが面倒くさい
      • 変換ツールある？
  • 懸念・検討が必要な事項
    • Globalスコープでのスタイル（resetCSS, 汎用クラス）
    • classNameの使用方針
    • 子要素へのスタイルの当て方
    • styled-componentsの命名
    • styleは別ファイルに分けた方が良いか？さすがにデザインの記述量が多い
    • template literal内のlint/format

参考リンク

概念理解

導入＆やってみた

yagi_engyagi_eng

CSS Modules

諸々

  • 実装してみた所感
    • styled-componentsより関連記事が少ない気がした
      • コンポーネント単位でCSSファイル分けるだけだし、そんな書くことない？人口が少ない？廃れてる？
      • 公式読めば細かい記法はわかる、そもそもそんなに種類ないけど
    • styled-componentsよりもCSSを一括でコピペして持ってこれる
      • 色んなセレクタの継ぎはぎになることもありそう
      • ただ継ぎはぎにするのではなく、適宜リファクタリングは必要
    • ローカルスコープとはいえ、最初は良くても、メンテしていくうちにスパゲッティになりかねない
  • 懸念・検討が必要な事項
    • resetCSS, タグにスタイルを当てている箇所の移植
      • index.cssに書けばよい
      • ローカルスコープに閉じてるとはいえ、SCSSってごちゃっとしがち（PureCSSつらつら記述するのもそうだけど）
    • マイナーなFeatureを使いたい時にwebpack.config.jsの編集が必要そう？
  • 辛い点
    • セレクタがhtmlタグの場合、クラス名を当てる必要がある
    • クラス名なしでも、SCSS形式で入れ子になっているhtmlタグにスタイルを当てることはできるのでそこまで問題ではなさそう

参考

概念理解

導入＆やってみた

CSS ModulesはCreate React Appでは標準装備になっているようだ！

Create React AppではCSSファイルのファイル名に「hoge.module.css」とファイル名と拡張子の間に「.module」を挟めばCSS Modulesと認識されるようだ。

このスクラップは2021/08/19にクローズされました