関連記事：Web開発技術マップ
CSSは書けるけど、プロジェクトが大きくなるとスタイルが複雑になり、管理が難しくなった経験はないでしょうか。CSS設計を学ぶことで、保守性が高く、チーム開発でも破綻しにくいスタイルシートを書けるようになります。
なぜCSS設計が必要なのか
CSS設計がないと起きる問題
- スタイルの上書き合戦で意図しないデザイン崩れ
!importantの乱用で制御不能に- クラス名が衝突して予期しない影響が出る
- 新しい機能を追加するたびに既存のスタイルが壊れる
CSS設計の目的
- 予測しやすい：クラス名からスタイルの内容がわかる
- 再利用しやすい：コンポーネント単位でスタイルを管理
- 保守しやすい：変更による影響範囲が限定的
- 拡張しやすい：新しい機能追加が既存に影響しない
主要なCSS設計手法
BEM（Block Element Modifier）
BEMは、クラス名の命名規則を定めた設計手法です。
/* Block */
.card { }
/* Element（Blockの子要素） */
.card__title { }
.card__image { }
/* Modifier（バリエーション） */
.card--featured { }
.card__title--large { }
メリット：
- クラス名が具体的で、HTMLを見るだけでスタイルの構造がわかる
- スタイルの衝突が起きにくい
- 学習コストが低い
デメリット：
- クラス名が長くなりがち
- HTML側の記述量が増える
FLOCSS
FLOCSSは、日本で広く使われているCSS設計手法です。レイヤー構造でCSSを管理します。
エンジニアのためのFigma入門も参考にしてください。
Foundation/ ... リセットCSS、ベーススタイル
Layout/ ... ヘッダー、フッター、サイドバー
Object/
Component/ ... 汎用的なUIパーツ
Project/ ... プロジェクト固有のスタイル
Utility/ ... 微調整用のヘルパー
メリット：
- レイヤーごとに責務が明確
- 日本語の情報が豊富
- 大規模サイトの設計に向いている
デメリット：
- ComponentとProjectの境界が曖昧になりやすい
- 初心者にはレイヤーの概念がわかりにくい
ユーティリティファースト（Tailwind CSS）
ユーティリティクラスを組み合わせてスタイルを構築する手法です。Tailwind CSSの普及で主流になりつつあります。
Tailwind CSS入門も参考にしてください。
<div class="flex items-center gap-4 p-4 bg-white rounded-lg shadow">
<img class="w-12 h-12 rounded-full" src="..." alt="">
<div class="text-lg font-bold">タイトル</div>
</div>
メリット：
- CSSファイルを直接編集する必要がない
- デザインの一貫性を保ちやすい
- ビルド時に未使用クラスが除去される
デメリット：
- HTMLのクラス属性が長くなる
- 独自のクラス名を覚える必要がある
どの設計手法を選ぶべきか
| 条件 | おすすめ手法 |
|---|---|
| 小〜中規模のサイト | BEM |
| 大規模サイト・受託開発 | FLOCSS |
| React/Vue等のコンポーネント開発 | ユーティリティファースト or CSS Modules |
| チーム開発で統一したい | BEM or FLOCSS |
CSS設計を学ぶステップ
- BEMの命名規則を理解する（1〜2日）
- 小さなプロジェクトでBEMを実践する（3〜5日）
- FLOCSSのレイヤー構造を学ぶ（2〜3日）
- Tailwind CSSを試してみる（3〜5日）
- プロジェクトに合った手法を選択・組み合わせる
まとめ
CSS設計は、コードの規模が大きくなるほど重要性が増します。まずはBEMから始めて、プロジェクトの性質に応じてFLOCSSやユーティリティファーストも取り入れていきましょう。
