【保存版】CSS設計のBEMとFLOCSSとは｜使用する際の注意点も同時解説

2025年4月22日2025年4月23日

この記事を読んでいる方は、Web制作の駆け出しやCSSの勉強中の方が多いかと思います。

自分のポートフォリオサイトやデモサイトを作成する際は、CSSのクラス名をどうするかや、フォルダの構成はそこまで深く考えなくていいかもしれません。

しかし、実務ではCSSのクラス名やフォルダ構成は規則に則って記述する必要があります。

もし実務でCSSのクラス名やフォルダ構成をそこまで意識せずに設計すると、以下の様なトラブルに遭います。

クラス名がバラバラで他の人が保守・改修出来ない
思わぬ箇所でクラス名が被ってしまい予期しない不具合が起こる
自分自身でも、スタイルの管理や変更が難しくなる

実務では自分だけで無く、自分じゃない他の人もサイトを管理します。

それに加えてデモサイトやポートフォリオとは違い、大規模なページを担当する事も珍しくありません。

こういった理由から実務でCSSを活用する際は、規則に則って記述する必要があります。

自分だけで無く、誰でもCSSのスタイルを管理出来る様にCSSを設計する事を実現するのがCSS設計です。

CSS設計にさまざまな種類があります。

今回は、Web制作で最もスタンダードなCSS設計の種類である「BEM」と「FLOCSS」について解説していきます。

これら２つを組み合わせてCSS設計する事がWeb制作では一般的です。

とはいえ、CSS設計すらもあまり分からないのに「BEM」と「FLOCSS」を理解するなんて大変と思うかもしれません。

そこでこの記事では、

BEMとは何か？
FLOCSSとは何か？
実際に使用する際の注意点

について解説していきます。

この記事を読めば、実務でCSS設計の「BEM」と「FLOCSS」を使用する際、何に注意すればいいかが分かります。

ぜひとも最後までご覧ください。

BEMとは？

BEMとは、CSSのクラス名に一貫したルールを与えるための命名規則です、

BEMは、Block・Element・Modifierの略です。

Block・Element・Modifierの3つを状況に応じて使い分けるのがBEMです。

ここでは例として、送信ボタンをBEMで記述するとします。

Block・Element・Modifierのそれぞれは、この様に使います。

<button class="button button--primary">
  <span class="button__label">送信</span>
</button>

button → Block（独立した再利用可能な部品）: ボタン全体を構成するコンポーネント。button というパーツ自体が1つの“ブロック”になります。
button__label → Element（ブロックの一部）: ボタンの中にあるテキスト部分を表す要素。ブロックの一部として構造的に結びついています。
button--primary → Modifier（特定の状態やバリエーション）: 　ボタンには「送信」や「キャンセル」など、用途に応じて見た目を変える必要があります。
　そのようなバリエーションを表すのがModifierです。

この様に命名ルールを明確にすると、次の様なメリットがあります。

CSSの意図が「パッと見てわかる」

どのパーツに関連するスタイルかが一目でわかる
他の人がコードを見たときも迷わず修正・追加ができる

クラスの衝突を防げる

header__nav と footer__nav のように、名前が明確に分かれるので、思わぬ上書き事故が減る
複数人での開発でも安心

CSSの再利用性が上がる

ブロック単位で部品を作るため、ポートフォリオや他案件でも使い回しやすい
モディファイアで「一部だけ変える」こともできるため、柔軟性が高い

このように、明確な命名ルールと設計指針を取り入れることで、「わかりやすく、壊れにくく、直しやすい」CSS設計が実現できます。

FLOCSSとは？

FLOCSS（フロックス）とは、SassでCSSを設計する際のフォルダ構成ルールの1つです。

「Foundation / Layout / Object / Component / Project / Utility」などの役割ごとにフォルダを分類して管理します。

簡単にいうと、CSSファイルを設計図どおりに整理整頓するという考え方です。

FLOCSSを活用すると以下の様なメリットがあります。

ファイルの役割が明確になる

どこに何を書くか迷わない

チームで作業が分担しやすい

「Aさんは component/ 担当、Bさんは project/ 担当」など、役割分担しやすくなる
Git管理でもコンフリクトが減る

メンテナンス性が劇的に上がる

修正・追加したいときに、探すべきファイルがすぐわかる
不要になったコードもどこを消せばいいか判断しやすい

実際の使い方としては以下の様にして使います。

├── foundation/   // リセットCSS・変数・mixinなど土台
├── layout/       // ヘッダー・フッターなどレイアウト全体
├── object/
│   ├── component/ // UI部品（ボタン・カードなど）
│   ├── project/   // ページ単位・セクション単位のスタイル
│   └── utility/   // 便利クラス（.mt-20など）
├── app.scss       // メインファイル（@useで各ファイルを読み込む）

このようにCSSファイルを整理整頓する事により、CSSファイルの保守・管理をしやすくします。

とはいえ実際の現場では「Foundation / Layout / Object / Component / Project / Utility」という公式の構成を採用しない事も多いです、

foundation/ を base/に変えたり、project/ を/pagesに変更したりします。

また、全てのフォルダを使う事なく、最小限に留める事もあります。

scss/
├── base/         // foundation の代替
├── component/    // UI部品全部ここ
├── pages/        // ページごとのCSS
├── app.scss

この様な感じです。

どういう構成にするかは、プロジェクトやチームの方針によって柔軟に判断してOKです

しかし基本的な構成は、「Foundation / Layout / Object / Component / Project / Utility」が元になっています。

実際に使用する際の注意点

ここからは実際にBEMとFLOCSSを使用する際の注意点について解説していきます。

注意すべきポイントは以下の通りです。

注意点

クラス名が長くなりすぎない様にする
見た目でクラス名を命名しない
app.scss に全部のファイルを手動で追記しない

一つずつ解説していきます。

クラス名が長くなりすぎない様にする

まだ慣れずにBEMを使用すると、要素の構造が多くなるにつれてクラス名が長くなっていくというミスが起こりがちです。

例えば以下の様なコードです。

<div class="card">
  <div class="card__title">
    //Elementが２つも合って長い
    <span class="card__title__label">タイトル</span>
  </div>
</div>

これだと要素が増えるたびにElementの記述も長くなるのでNGです。

この様な場合は以下の様にして記述します。

<div class="card">
  <div class="card__title">
    //Elementは1階層まで
    <span class="card__label">タイトル</span>
  </div>
</div>

Elementは1階層までにするのがルールです。

見た目でクラス名を命名しない

クラス名は、見た目に基づいてクラス名を決めるのではなく、役割の意味に基づいた命名ルールにする必要があります。

たとえばボタンが赤いからといって、button--redなどとするのは基本的にNGです。

//これはNG
<button class="button button--red">削除</button>

なぜなら、BEMは「構造と役割に名前をつける」ことが原則になります。

色やサイズなどの見た目はスタイルの話であり、構造と役割ではないです。

例えば、削除、キャンセル、リセット の様な「注意して押すべき操作」は、操作に危険が伴うという意味で--dangerとするのが一般的です。

//削除は注意して行う操作なのでbutton--danger
<button class="button button--danger">削除</button>

このようにスタイルでクラス名を命名するのではなく、役割でクラス名を決定する事が重要です。

`app.scss` に全部のファイルを手動で追記しない

app.scssは、すべてのscssファイルを読み込むメインのファイルです。

@useを使って全てのファイルを読み込みます。

@use "foundation/reset";
@use "foundation/variables";
@use "foundation/mixin";
@use "layout/header";
@use "object/component/button";
@use "object/component/card";
@use "object/project/hero";
@use "object/project/faq";

しかしこれだとファイルが増えるたびにapp.scss がどんどん肥大化していき、保守・管理に悪影響を出します。

こうした問題を防ぐために、base.scss などの中継ファイルを作成し、そこに @forward を使ってまとめます。

具体的には以下の様にします。

// base.scss
@forward "foundation/reset";
@forward "foundation/variables";
@forward "foundation/mixin";
@forward "layout/header";
@forward "layout/footer";

そして、app.scss では必要なまとまりだけを @use するようにします。

// app.scss
@use "base";
@use "component";
@use "project";

全体のフォルダ構成は以下の通りです。

scss/
├── foundation/
│   ├── _reset.scss
│   ├── _variables.scss
│   └── _mixin.scss
├── layout/
│   ├── _header.scss
│   └── _footer.scss
├── object/
│   ├── component/
│   │   ├── _button.scss
│   │   └── _card.scss
│   ├── project/
│   │   ├── _hero.scss
│   │   └── _faq.scss
├── base.scss        ← @forward まとめ用
├── component.scss   ← @forward component/
├── project.scss     ← @forward project/
└── app.scss         ← ここでは @use だけ！