CSS Modules
クラス名をファイル単位に閉じ込めるCSSの管理方式。ビルド時にクラス名を固有化し、部品間の衝突を防ぐ。
何を担当する？
ビルド時にクラス名を固有化し、部品間の衝突を防ぐ。
いつ使う？
- 部品ごとに通常のCSSを安全に分離したいとき。
避けたい場面
- グローバルなユーティリティクラスを中心に統一したいとき。
CSS Modules / styled-components
「どっちが上？」ではなく、まず同じ仕事をする道具なのかを確認します。
直接比較しやすい組み合わせ
CSS Modulesとstyled-componentsはどちらも「CSS設計・生成」の技術なので、同じ土俵で比較しやすい組み合わせです。
styled-components
React部品とCSSをJavaScript内で結び付けるCSS-in-JS ライブラリ。propsに応じたスタイルと固有クラスをランタイムで生成する。
何を担当する？
propsに応じたスタイルと固有クラスをランタイムで生成する。
いつ使う？
- 既存styled-components資産や動的テーマを保守するとき。
避けたい場面
- サーバー component中心でランタイム CSSを減らしたい新規構成。
CSS Modulesとstyled-componentsはスタイルの再利用、局所化、実行時コストで比較される。ビルド時にクラス名を固有化し、部品間の衝突を防ぐ。一方、styled-componentsはpropsに応じたスタイルと固有クラスをランタイムで生成する。