CSS設計手法は、プロジェクトの規模が大きくなるほど保守性を左右する重要なテーマです。BEM・FLOCSS・Utility-Firstなど代表的な手法にはそれぞれ得意とする状況があります。本記事では3つの代表的なCSS設計手法を比較し、プロジェクト別の選び方を解説します。
主要な3つの設計手法
- BEM：Block・Element・Modifier の命名規則ベース。海外発祥で広く普及
- FLOCSS：BEMをベースに日本で発展した、Foundation/Layout/Object 階層化手法
- Utility-First：Tailwind CSSに代表される、汎用クラスを組み合わせる手法
BEMの例
<div class="card card--featured">
<h2 class="card__title">タイトル</h2>
<p class="card__body">本文</p>
</div>命名規則が機械的で、CSSの命名衝突を防ぎやすい一方、クラス名が冗長になりがちです。
FLOCSSの構成
- Foundation：reset・base・variables
- Layout：header・footer・grid
- Object：Component（p-）、Project（c-）、Utility（u-）
レイヤー思考でディレクトリを分けるためチーム開発で見通しが立ちやすいですが、ルール理解に学習コストがかかります。
Utility-Firstの例
<div class="p-6 rounded-lg shadow-md bg-white">
<h2 class="text-xl font-bold">タイトル</h2>
<p class="mt-2 text-gray-700">本文</p>
</div>CSSを書かずにスタイリングできるため開発速度は最速。共通化はコンポーネント単位で行います。
比較
- 記述量：Utility-First < BEM < FLOCSS
- 命名疲れ：Utility-Firstがほぼゼロ
- HTML可読性：BEM/FLOCSS > Utility-First
- 規模適応：FLOCSSが大規模に強い
- 学習コスト：FLOCSS > BEM > Utility-First
プロジェクト別の選び方
- BEM：中規模・素のCSS/SCSSで運用するチーム
- FLOCSS：複数人で長期運用するメディア・コーポレートサイト
- Utility-First：React/Vue等コンポーネント駆動のSPA・新規開発
まとめ
CSS設計に「正解」はなく、プロジェクトの性質・チーム規模・運用期間に応じた選択が重要です。コンポーネント駆動の開発が主流の現在はUtility-First + コンポーネント抽出が最有力ですが、CMS主体のサイトではBEM/FLOCSSが今でも合理的です。
