Bootstrap
レイアウトとUI部品をまとめた成熟したCSS フレームワーク。グリッド、フォーム、ナビゲーションなどを既定の見た目で素早く提供する。
何を担当する？
グリッド、フォーム、ナビゲーションなどを既定の見た目で素早く提供する。
いつ使う？
- 管理画面や試作を共通部品で短期間に作るとき。
避けたい場面
- 独自性の高い設計を最小の上書きで実現したいとき。
Bootstrap / CSS Modules
「どっちが上？」ではなく、まず同じ仕事をする道具なのかを確認します。
直接比較しやすい組み合わせ
BootstrapとCSS Modulesはどちらも「CSS設計・生成」の技術なので、同じ土俵で比較しやすい組み合わせです。
CSS Modules
クラス名をファイル単位に閉じ込めるCSSの管理方式。ビルド時にクラス名を固有化し、部品間の衝突を防ぐ。
何を担当する？
ビルド時にクラス名を固有化し、部品間の衝突を防ぐ。
いつ使う？
- 部品ごとに通常のCSSを安全に分離したいとき。
避けたい場面
- グローバルなユーティリティクラスを中心に統一したいとき。
BootstrapとCSS Modulesはスタイルの再利用、局所化、実行時コストで比較される。グリッド、フォーム、ナビゲーションなどを既定の見た目で素早く提供する。一方、CSS Modulesはビルド時にクラス名を固有化し、部品間の衝突を防ぐ。