Atomic Design / CSS Modules

大規模なプロジェクトでUIを破綻させないためには、明確な設計方針が必要です。

Atomic Design の考え方

UIを 5つの階層に分けて管理します：

1. Atoms (原子): ボタン、入力欄などの最小単位
2. Molecules (分子): 複数の原子を組み合わせた機能（検索フォームなど）
3. Organisms (有機体): 独立して完結するセクション（ヘッダー、商品リストなど）
4. Templates (テンプレート): ページ全体のレイアウト枠組み
5. Pages (ページ): 実際のデータを流し込んだ最終形態

CSS Modules による解決

グローバルなCSSの競合問題を解決するために、CSS Modules が広く使われています。クラス名が自動で一意にハッシュ化されるため、予期せぬスタイルの崩れを防げます。

/* styles.module.css */
.button {
  background-color: blue;
}

import styles from './styles.module.css';
<button className={styles.button}>Click Me</button>

コンポーネントとスタイルを一対一で対応させることで、変更の影響範囲を最小限に抑えることができます。