長期的に破綻しないCSS設計「FLOCSS」とは？構成と役割

CSSを書き続けていると、
・どこに書けばいいのかわからない
・同じようなスタイルが増えていく
といった問題に直面することがあります。

そのような課題を解決するためのCSS設計手法の一つが「FLOCSS（フロックス）」です。

FLOCSS とは？

FLOCSS（フロックス）は、「Foundation・Layout・Object-Oriented CSS」の頭文字から名付けられたCSS設計手法です。

CSSを役割ごとにレイヤー分けすることで、スタイルの責務を明確にし、保守性や再利用性を高めることを目的としています。

FLOCSSの3つのレイヤー

FLOCSSは、大きく3つのレイヤーで構成されています。
それぞれ役割が明確に分かれており、責務を分離することでCSSを管理しやすくします。

Foundation

Foundationは、サイト全体の土台となるスタイルです。
例えば、次のようなものが該当します。

• Reset CSS
• Normalize.css
• 基本フォント
• html
• body
• CSS変数

ページ固有のデザインは記述せず、すべてのページで共通して適用される基本設定のみを配置します。

Layout

Layoutは、ページ全体の骨組みを定義するレイヤーです。
例えば、次のようなものが該当します。

• ヘッダー
• フッター
• メインコンテンツ
• サイドバー
• コンテナ

基本的には一つのページ内に一度しか登場しない大きなレイアウト要素を担当します。

Object

Objectは、ボタンやカード、見出し、ナビゲーションなど、サイト内で繰り返し利用される部品を管理するレイヤーです。

FLOCSSでは、このObjectをさらに次の3種類に分類します。

Component

Componentは、小さく汎用的なUIパーツです。
例えば、次のようなものが該当します。

• 見出し
• ボタン
• カード
• アイコン
• ページネーション

Project

Projectは、そのWebサイト専用に作られたコンポーネントです。
例えば、次のようなものが該当します。

• トップページのメインビジュアル
• 料金表
• サービス紹介
• お問い合わせ導線

Componentよりも再利用性は低く、サイト独自のデザインをまとめる役割があります。

Utility

Utilityは、細かな調整を行うためのクラスです。
例えば、次のようなものが該当します。

• 余白
• 文字サイズ
• 文字色
• 表示・非表示

Utilityクラスばかりになると、HTMLに多くのクラスが並び、デザインの管理もしづらくなるため、補助的な用途に留めることが推奨されます。

FLOCSSを導入するメリット

FLOCSSを導入するメリットは次のとおりです。

• CSSの責務が明確になる
• スタイルを探しやすくなる
• 再利用しやすい
• 保守しやすい
• 複数人で開発しやすい

特に数十ページ以上あるWebサイトでは、その効果を実感しやすくなります。

FLOCSSの注意点

FLOCSSは非常に優れた設計手法ですが、小規模サイトでは構成がやや大げさになる場合があります。
また、ルールをチーム内で統一しないと、どのレイヤーに配置するか迷うこともあります。
導入時には、命名規則や運用ルールも合わせて決めておくとスムーズです。

BEMとの違い

FLOCSSとBEMは混同されがちですが、役割が異なります。

FLOCSSは「CSSをどこに配置するか」という設計ルールです。

一方、BEMは「クラス名をどう付けるか」という命名規則です。

そのため、FLOCSSとBEMは対立するものではなく、組み合わせて利用するのが一般的です。

BEMについて詳しくは以下の記事で紹介しています。

まとめ

FLOCSSは、CSSを役割ごとに整理し、長期運用でも管理しやすい状態を保つための設計手法です。

Foundation・Layout・Objectという3つのレイヤーに分けることで、スタイルの責務が明確になり、保守性や再利用性が向上します。

BEMなどの命名規則とも相性が良く、個人開発から大規模なWebサイトまで幅広く活用できます。

CSSが複雑になってきたと感じたら、まずはFoundation・Layout・Objectの3つのレイヤーを意識して整理することから始めてみましょう。