FLOCSSとBEMを理解する

はじめに

本記事では、FLOCSSとBEMについて整理して学んでいきます！

私はマークアップをする際に、CSS/Sassのクラス名の命名に悩んでしまうことがあります。
一緒にFLOCSSとBEMをマスターして、より分かりやすい記述ができるようになりましょう！

FLOCSSとは

FLOCSS（Foundation Layout Object CSS）は、ファイルやディレクトリの構成だけでなく、命名のルールもMindBEMding（BEM）を用いて決められている設計思想で、導入することで混乱の少ない記述になるとされています。

FLOCSSの構造

• Foundation

デフォルトとなるスタイルのファイル（reset.scssやfont.scssなど）

• Layout

サイト全体のレイアウトに関わる要素のファイル（header.scssやfooter.scssなど）

• Object

使い回す要素のファイル
ComponentとProjectに分かれる
Utility（細かい調整のためのスタイルをまとめたファイル）も含む

Objectの構成

• Object

– Component：最低限の機能を持ったもの（button.scssやtxt.scssなど）
… 接頭辞にc-がつく
– Project：プロジェクト固有の塊（about.scssやlogin.scssなど）
… 接頭辞にp-がつく
– Utility：細かい調整のためのスタイル
… 接頭辞にu-がつく

Componentの最低限の機能の定義が人によって異なり、Componentなのか、Projectなのかどちらに分類されるべきか混乱が生じる可能性があるとされています。チーム作業する際は共通の認識が必要です。

例えば、inputなどの入力フォームのスタイルをまとめたものをform.scssとしてComponentに入れるのは規則に沿ったものと言えるでしょうか。

入力フォームは同じスタイルを使い回すことが多いという点で、Project（プロジェクト固有の塊）に当てはまらないものですが、様々なスタイルをまとめているという点ではComponent（最低限の機能を持ったもの）にも当てはまっていないような気がします。

今回の例の場合は、form全体の構成はProjectに分類し、inputやcheckboxなど個々のパーツはComponentに分類するのが良さそうですね！

BEMとは

BEMはクラス名の命名規則の一つです。

BEMに基づいて、CSSのクラス名の規則として作られた「MindBEMding」をBEMと呼ぶことがあり、今回もMindBEMdingをBEMとしています。

参考
CSSBEMの方法論とMindBEMdingという記法

具体的なBEMの書き方

具体的なBEMの書き方は、以下となります。

Block（１つのコンポーネント）__Element（子要素）--Modifier（バリエーション）

アンダースコアとハイフンの数は2個がMindBEMdingのルールです。
ハイフンを1つにしない理由は、要素の名前にケバブケース/チェインケース（例：hoge-hoge）が使われることがあり、それと区別するためです。

共通認識として、ケバブケースは使用しないことを前提にすればハイフンを1つにしても良さそうですね！

【componentの具体例】

【projectの具体例】

elementをネストするのはNG

Element（子要素）のネストは複雑になってしまうためNGとされています。
HTMLで見た時に入れ子関係だったとしても、常にブロック直下のエレメントであるように書くべきとされています。

【elementのネスト回避の具体例】

elementの中にelementを入れるのはOKとされています。少し複雑ですね。
アンダースコアが2回連続で続かないように気をつけましょう。

x　block__element__element
○　block__element--element

まとめ

今回はFLOCSSとBEMについて改めて整理しました。

原則から発展したより細かい規則については、チームで共通認識を作れるようになると混乱の少ない設計にすることができそうです！

紹介にあたって参考にした公式のドキュメントも合わせて確認してみてください！
ドキュメント

FLOCSSとBEMを用いて別の人が見てもわかりやすい記述を書きましょう！