CSS設計はどれがいい？結論、FLOCSSがおすすめ！

2026年3月21日

当ページのリンクには広告が含まれています。

Web制作やWeb開発を進める中で、

「CSSのクラス名がぐちゃぐちゃになってしまった」
「後から修正しようとしたら、どこに影響が出るか分からなくて怖い」

といった経験はありませんか？

プロジェクトが大きくなるほど、CSSの管理は難しくなります。
そこで重要になるのが「CSS設計」です。

世の中にはOOCSSやSMACSSなど様々な設計手法がありますが、筆者が実務を通して一番おすすめしたいのは「FLOCSS（フロックス）」です。

今回は、なぜFLOCSSが使いやすいのか、その理由と具体的な書き方を解説します！

FLOCSSとは？

FLOCSSは「Foundation Layout Object CSS」の略で、エンジニアの谷拓樹氏によって考案されたCSS設計手法です。

「Foundation」「Layout」「Object」の3つのレイヤーをベースに構成されており、非常に整理整頓がしやすいのが特徴です。

FLOCSSはクラスの命名規則として、「BEM」を採用しています。

BEMとは？

BEMは、Block（塊）、Element（要素）、Modifier（状態）の頭文字を取った命名規則です。

Block: 元となるコンポーネント（例：.card）
Element: Blockの中身（例：.card__title）※アンダースコア2つで繋ぐ
Modifier: 変化した状態（例：.card__title--red、.card__title--blue）※ハイフン2つで繋ぐ

FLOCSSのメリット・おすすめする理由

なぜ数ある手法の中でFLOCSSを推すのか。

その理由は「分かりやすさ」と「運用のしやすさ」にあります。

メリット１：基本がBEMなので、視認性が高い

BEM特有の「アンダースコア（__）」や「ハイフン（--）」で繋ぐルールは、一見長く見えますが、実はクラス名が長くなった時に圧倒的に見やすいというメリットがあります。

もし全てを単一のハイフンで繋いでしまうと、どれがブロックでどれが要素・モディファイアなのか等、判別がしづらくなります。

しかし、BEMなら構造が一目で分かります。

// ハイフンでつなぐと見づらい
.service-list-item-title-white

// FLOCSSだと視認性が高い
.p-service-list__title--white

メリット２：接頭辞（Prefix）で役割が即断できる

FLOCSSではクラス名の先頭に、 l-（Layout）や p-（Project）、c-（Component）を付与します。

これにより、HTMLのクラス名を見ただけで
「これは共通パーツだな」
「これはこのページ固有のレイアウトだな」
と、コードの役割が瞬時に判別できるのです。

これは保守性において非常に大きなメリットです。

メリット３：「これはどこに属すべきか？」を考える癖がつく

FLOCSSを採用すると、
常に「これは共通パーツ（c-）にすべきか、それともこのページ独自の要素（p-）か？」を考えるようになります。

この習慣がつくと、「再利用できるコード」が増え、CSSの保守性が劇的に向上します。

長期的なプロジェクトほど、このメリットが効いてきます。

では、具体的な構造と書き方を見ていきましょう。

FLOCSSの書き方について解説

FLOCSSの基本型

基本的には以下のフォルダ構成（またはコメント分け）で管理します。

Foundation：サイト全体の基本設定やリセットCSS。
Layout：ヘッダー、フッター、サイドバー、メインコンテンツなど大きな枠組み。
Object：実際のコンテンツパーツ。ここからさらに3つに分割します。
- Component：ボタンやタイトルなど、どこでも使える最小単位。
- Project：特定のセクションやページに依存する要素（会社概要やお問い合わせフォームなど）。
- Utility：細かい調整（余白など）を行うためのユーティリティクラス。

具体的なコード例（Aboutセクション）

一般的な「タイトル、文章、画像、ボタン」で構成されたAboutセクションを想定します。

<section class="l-section u-pb-0">
  <div class="l-container">

    <div class="p-about-card">

      <figure class="p-about-card__img-wrapper">
        <img src="img-about.jpg" alt="私たちのオフィス" class="p-about-card__img">
      </figure>

      <div class="p-about-card__body">
        <h2 class="c-heading c-heading--left">私たちについて</h2>
        <p class="p-about-card__text">
          私たちは、テクノロジーとデザインを融合させ、新しい価値を創造するクリエイティブ集団です。
          クライアントの課題に真摯に向き合い、最適なソリューションを提供します。
        </p>
        <div class="p-about-card__btn-wrapper">
          <a href="/about/" class="c-btn c-btn--primary">会社概要を見る</a>
        </div>
      </div>

    </div>
  </div>
</section>

上記のHTMLで使用しているクラス名を、FLOCSSのレイヤーごとに分解して説明します。

① l- で始まる記述（Layoutレイヤー）

役割：ページ全体の大きな構造（枠組み）を作る。

.l-section: セクション全体の共通的な上下余白（padding）などを定義します。
.l-container: コンテンツの最大横幅を中央揃え（margin: 0 auto;）にする、どのページでも使う枠です。

これらは、中身が何であれ「枠」としての役割に徹します。

② p- で始まる記述（Projectレイヤー）

役割：特定のセクションやページ（ここではAbout）固有のデザインや構造を作る。

.p-about-card: Aboutセクション独自の「画像と文章が横並びになるカード」という塊（BEMのBlock）を定義します。
.p-about-card__img、.p-about-card__text: .p-about-card ブロックの中でのみ意味を持つ、画像やテキストという要素（BEMのElement）です。

したがって、他のセクション（例えばServiceセクションやNewsセクション等）で .p-about-card のスタイルを使い回すことは想定していません。