BEM/FLOCSSって結局何なのか、なんとなく使ってた自分のために整理した話

「BEMとかFLOCSSって、名前はよく見るけど結局何なの?」というのが、正直最初にコーディングを覚えたときの自分の感想でした。
クラス名にとりあえずcontent-boxとか付けて、後から見返すと「これ何のためのクラスだっけ」ってなる、みたいなことを何度も繰り返してきた身としては、この2つの考え方を知ってからだいぶ楽になったので、今日は基本の部分だけをゆるっと整理してみようと思います。

🎥 この記事の内容は動画でも解説しています。

BEMとかFLOCSSって、そもそも略語なの?

そうだよ。BEMは「Block Element Modifier」の略で、クラス名の付け方のルール。FLOCSSは「Foundation Layout Object CSS」の略で、ファイルの置き場所を決めるルールなんだ。

2つで役割が違うんだね。

そうそう。だからセットで使われることが多いんだよ。

BEMは「クラス名の付け方」のルール
BEMが無いと、どうなるか
FLOCSSは「ファイルの置き場所」のルール
なんでこの2つをセットで使うのか
プレフィックスも付けておくと迷いが減る
まとめ

BEMは「クラス名の付け方」のルール

BEMは、パーツを「Block(かたまり)」「Element(かたまりの中身)」「Modifier(見た目や状態の違い)」の3つに分けて、クラス名にその関係性を表す書き方です。
例えばカードのパーツなら、こんな感じになります。

<div class="c-card">
  <h3 class="c-card__title">タイトル</h3>
  <p class="c-card__text">本文</p>
</div>
<div class="c-card c-card--highlight">
  ...
</div>

c-cardがBlock、c-card__titleのように__で繋がっているのがElement、c-card--highlightのように--で繋がっているのがModifierです。
この書き方のいいところは、クラス名を見ただけで「どのパーツの、どの部分の話をしているか」がひと目で分かることです。
HTMLだけ渡されても、CSSファイルを開かなくても構造が想像つく、というのが地味にありがたいポイントだと感じています。

BEMが無いと、どうなるか

BEMを知る前の自分がよくやっていた失敗が、思いついた名前をそのままクラスにすることでした。
カードのタイトルにcard-title、見出しっぽいカードにはcard-title2、少し違う色のカードにはcard-title-blue…みたいに、その場しのぎで名前を増やしていくパターンです。
これ、増えれば増えるほど「このクラス、どのパーツの何なんだっけ」が分からなくなって、結局似たようなスタイルを持つクラスを二重に作ってしまったりします。
BEMを使うと、c-card__titleという1つの名前に「c-cardというBlockの、titleというElementだよ」という情報が最初から埋め込まれているので、この手の迷子が起きにくくなります。

FLOCSSは「ファイルの置き場所」のルール

BEMがクラス名のルールなのに対して、FLOCSSはSCSSファイルをどのフォルダに置くかのルールです。
基本の構成はこんな感じになっています。

foundation: 変数・リセットCSS・ベースになるスタイル
layout: ヘッダーやフッターなど、ページ全体の骨組み
component: ボタンやカードなど、使い回すパーツ
project: 特定のページだけで使うスタイル
utility: 微調整用の汎用クラス

実際にこのブログのSCSSフォルダを覗くと、こんな感じになっています。

ポイントは、「見た目の種類」じゃなくて「どこで使い回すか」でフォルダを分けることです。
ボタンやカードみたいに、いろんなページで何度も登場するパーツはcomponentに、トップページのヒーローセクションみたいに1箇所にしか出てこないものはprojectに置く、というイメージです。
この線引き、実際に手を動かしてみると意外と迷うポイントが多くて、自分がどう判断しているかは前にもう少し詳しく書いた記事があるので、気になる方はそちらもどうぞ。

なんでこの2つをセットで使うのか

BEMは「クラス名」、FLOCSSは「ファイルの置き場所」と、実はカバーしている範囲が違います。
クラス名だけ綺麗に付けても置き場所がバラバラだと結局探すのに時間がかかるし、逆にフォルダだけ綺麗に分けてもクラス名が適当だと中身が分かりにくい。
両方を組み合わせることで、「このパーツはどこにあって、どういう役割か」が名前とフォルダの両方から追えるようになる、というのがセットで使われる理由なんだと理解しています。

プレフィックスも付けておくと迷いが減る

これはBEM/FLOCSS本体のルールというより自分が併用している工夫なんですが、クラス名の頭に役割を表す文字を付けています。

l-: レイアウト(l-headerなど)
c-: コンポーネント(c-buttonなど)
u-: ユーティリティ(u-hiddenなど)
is-: 状態(is-activeなど)

プレフィックスを見ただけで「レイアウトの話か、パーツの話か、状態の話か」が分かるので、数ヶ月後の自分が見返したときにも助かってます。

まとめ

正直、最初に「BEM」「FLOCSS」という単語だけ見たときは、なんだか小難しいルールに見えて敬遠していました。
でも中身を分解してみると、「クラス名の付け方」と「ファイルの置き場所」を決めているだけのシンプルな話で、知ってしまえば案外すぐ馴染みます。
名前だけ聞いて身構えていた頃の自分に、この記事を読ませてあげたいくらいです。

実際の運用でどう線引きしているかはこちらの記事で詳しく書いているので、基本が掴めたら合わせて読んでみてください。