LaravelでのFLOCSS＋BEMの導入ステップを徹底解説

2025年5月23日 最終更新日時 : 2025年5月23日 Takamizawa

はじめに：CSS設計、どうして必要？

Laravelを使った中規模以上のプロジェクトに携わるようになって、私はある悩みにぶつかりました。それは「CSSがどんどん複雑になって、管理が難しくなる」という問題です。

開発の初期段階では、シンプルなクラス名を付けて、適当にスタイルを当てていけばある程度うまくいきます。しかし機能追加が進み、複数人のチームで開発を進めていく中で、以下のような状況が目立つようになりました。

  • 同じようなコンポーネントが、微妙に違うスタイルで複数存在する
  • クラス名の命名ルールが人によってバラバラ
  • 影響範囲が読めず、CSSの変更が怖い

このままでは、CSSがプロジェクトのボトルネックになってしまう。そう感じた私は、「再利用性が高く、メンテナンス性に優れたCSS設計」に本腰を入れて取り組むことにしました。

そこで出会ったのが、**FLOCSS（フロックス）**というCSS設計の考え方と、**BEM（Block-Element-Modifier）**という命名規則です。

この2つを組み合わせてLaravelプロジェクトに導入してみたところ、驚くほどコードが整理され、見通しがよく、安心してスタイルを追加・変更できる環境が整いました。

この記事では、その導入方法と、実際にどのように活用しているかをステップ形式で解説していきます。
CSS設計に悩むLaravel中級者の方に、少しでもヒントになれば嬉しいです。

FLOCSSとは？BEMとは？

CSS設計の話題になるとよく登場するのが、FLOCSSとBEMです。名前は聞いたことがあるけど、実際にどう活用すればいいのかイメージが湧かない……という方も多いかもしれません。ここでは、それぞれの概要と、なぜこの2つを組み合わせると効果的なのかを簡潔にご紹介します。

FLOCSSとは？

FLOCSS（フロックス）は、CSSの構造を論理的に整理するための設計手法で、「再利用性」と「保守性」の向上を目的としています。以下の6つのカテゴリにスタイルを分割することで、スタイルの責任範囲を明確にします。

カテゴリ役割
FoundationリセットCSSやベースとなるスタイル（html, body など）
Layout大枠のレイアウト（ヘッダー、フッター、2カラムなど）
Object汎用的なUIパーツ（ボタン、フォームなど）
Component画面固有の部品（投稿カード、ユーザープロフィールなど）
Projectページ固有のスタイル
Utility補助的なスタイル（マージン調整など）

このように役割ごとにスタイルを切り分けることで、チーム内でも見通しのよいCSS設計が可能になります。

BEMとは？

BEMは、クラス名に意味を持たせて構造を明確にする命名規則です。Block（ブロック）・Element（要素）・Modifier（変化）の3つの単位で構成されます。

例：

<div class="card">
  <h2 class="card__title">タイトル</h2>
  <p class="card__description">説明文です。</p>
  <button class="card__button card__button--primary">クリック</button>
</div>

このように、cardがBlock、card__titleやcard__descriptionがElement、card__button--primaryがModifierです。構造的な名前をつけることで、スタイルの読みやすさと保守性が格段に向上します。

なぜFLOCSSとBEMは相性がいいのか？

FLOCSSで「スタイルの責任範囲（どこに書くか）」を管理し、BEMで「スタイルの命名規則（どう名前を付けるか）」を統一する。この2つを組み合わせることで、**“何がどこに書いてあるか、すぐにわかるCSS”**が実現できます。

Laravelのようなコンポーネントベースのフレームワークでは、この設計が特に効果を発揮します。Bladeテンプレートとの親和性も高く、構造化されたCSSが無理なく実装できるのです。

Laravelへの導入準備

FLOCSSとBEMの設計方針が理解できたところで、次は実際にLaravelプロジェクトへ導入するための準備ステップをご紹介します。LaravelではSassの利用が標準的になっているため、それを前提に環境を整えていきます。

1. Sassを使えるようにする

Laravel 9以降では、Viteが標準のビルドツールになっています。Sassファイルを読み込むには、以下の準備が必要です。

必要なパッケージのインストール

npm install -D sass

resources/sass/app.scss を作成

このファイルが、FLOCSSの各ファイルを読み込むベースとなります。

vite.config.js の編集（基本的にはそのままでOK）

Viteは.scssファイルもビルド対象として認識してくれます。

Bladeテンプレートで読み込む

@vite('resources/sass/app.scss')

2. フォルダ構成の作成

FLOCSSに沿ったフォルダ構成を作成します。以下は基本的な構成の一例です。

resources/
└── sass/
    ├── foundation/
    │   └── _reset.scss
    ├── layout/
    │   └── _header.scss
    ├── object/
    │   └── _button.scss
    ├── component/
    │   └── _card.scss
    ├── project/
    │   └── _home.scss
    ├── utility/
    │   └── _margin.scss
    └── app.scss

app.scss の中身

@use 'foundation/reset';
@use 'layout/header';
@use 'object/button';
@use 'component/card';
@use 'project/home';
@use 'utility/margin';

これでFLOCSSベースのSass構成が整い、Laravelの中で整理されたスタイルの管理が可能になります。

この時点で、FLOCSSとBEMのベースとなる「構造と環境」がLaravelにセットアップできた状態になります。
次は、具体的な命名ルールとBladeとの組み合わせ例に進んでいきましょう！

命名ルールとファイル構成の実例

ここでは、Laravelでの実装を前提に、FLOCSSとBEMのルールをどのように現場で運用しているかを、実際のコード例とともにご紹介します。Bladeテンプレートとの組み合わせ方も見ていきましょう。

1. FLOCSSに沿ったファイルの配置例

たとえば、共通で使うボタンコンポーネントを作るとします。この場合、objectディレクトリに _button.scss を作成します。

// resources/sass/object/_button.scss

.button {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  font-weight: bold;
  text-align: center;

  &--primary {
    background-color: #007bff;
    color: #fff;
  }

  &--secondary {
    background-color: #6c757d;
    color: #fff;
  }
}

このように、FLOCSSの責任分離と、BEMの命名ルールを組み合わせて運用します。

2. Bladeテンプレートとの連携

Laravelでは、Bladeテンプレートを使って再利用可能なUI部品を構築します。たとえば、ボタンのコンポーネントは以下のように記述できます。

{{-- resources/views/components/button.blade.php --}}
@props(['type' => 'primary'])

<button {{ $attributes->merge(['class' => "button button--$type"]) }}>
  {{ $slot }}
</button>

呼び出し側：

<x-button type="primary">送信</x-button>
<x-button type="secondary">キャンセル</x-button>

このように書くことで、BladeコンポーネントとBEM命名規則が自然に融合し、スタイルの一貫性と再利用性を保つことができます。

3. 他のカテゴリの使い分けの例

  • layout/_header.scss → サイト全体のヘッダー構造（位置調整、全体幅など）
  • component/_card.scss → 画面固有のUI（例：投稿カード）
  • utility/_margin.scss → .u-mb-32 のような補助クラス

役割が明確なので、**「どのスタイルをどこに書くか迷わない」**というのが大きなメリットです。

FLOCSSとBEMの運用をこのようにLaravelに落とし込むことで、スタイルの分担、命名、Bladeとの統一感が自然と保たれるようになります。

実務で使ってみて感じたこと

FLOCSSとBEMをLaravelプロジェクトに導入して、実際の開発で運用してみた結果、いくつかの「これは良い！」と感じた点、そして「ここは気をつけた方がいいかも」というポイントが見えてきました。ここではその体験を共有します。

👍 導入して良かったこと

1. CSSの見通しが劇的に良くなった

FLOCSSで役割が明確に分かれているので、
「どこに何のスタイルが書いてあるか」がすぐに把握できるようになりました。

2. チームでの開発がスムーズに

命名ルール（BEM）と構成ルール（FLOCSS）が明文化されていることで、
新しいメンバーが入っても「何をどう書けばいいのか」がすぐにわかります。

3. 安心して変更できる

「このクラスを変更すると、他に影響が出るかも…」という不安が大幅に減りました。
スタイルのスコープが明確なので、安全に手を加えられます。

⚠️ 注意した方がいい点・運用のコツ

1. 最初のルールづくりに少し手間がかかる

FLOCSSのカテゴリ分けや、BEMの命名の方針を最初に明確にする必要があります。
ここを曖昧にしたままだと、結局スタイルがごちゃついてしまいます。

2. BEMの命名が長くなりがち

たとえば .user-profile__avatar--large のように、複雑になるとクラス名が長くなりがちです。
ただしこれは「読みやすさ」と「構造の明確さ」のトレードオフと考えれば、そこまでデメリットではありません。

3. カテゴリの使い分けに迷うこともある

特に「Object」と「Component」の境界は、実務では曖昧になることがあります。
その場合はプロジェクト内で「これはObjectとして扱う」といった共通認識をチーム内で持つことが大事です。

結果として、FLOCSSとBEMをLaravelに導入したことで、**「CSSがストレスなく書ける」**という開発体験を得ることができました。
CSS設計に悩んでいる方には、ぜひ一度試してみてほしい手法です。

まとめ

LaravelのプロジェクトにFLOCSSとBEMを導入することで、CSSの設計における「迷い」や「不安」が大幅に減り、見通しの良いスタイル設計が実現できました。

✅この記事で紹介したこと

  • FLOCSSはスタイルを役割ごとに明確に分類することで、構造化されたCSSを実現
  • BEMは命名ルールに一貫性を持たせ、クラス名だけで構造がわかる状態を作れる
  • LaravelではBladeコンポーネントとの相性も良く、導入のハードルが意外と低い
  • 実務での導入により、チーム開発・メンテナンス・スタイルの再利用性が大きく向上

CSSは「なんとなく書けてしまう」ぶん、気づいたときには膨れ上がり、複雑になっていることがよくあります。だからこそ、最初に「設計」しておくことの価値はとても大きいと感じています。

もしあなたがLaravelでのCSS設計に悩んでいるなら、FLOCSSとBEMの導入を一つの選択肢としてぜひ検討してみてください。きっと「書きやすさ」「読みやすさ」「変更しやすさ」に、前向きな変化を感じられるはずです。

カテゴリー
Laravel、アプリ開発

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

前の記事
【2025年最新版】今注目されているJSフレームワークを勢力図で比較！
2025年5月18日
次の記事
JavaScriptしか使ったことない自分が、TypeScriptを“あえて”学びたい理由
2025年5月24日