【備忘録】BEM、SMACSS、FLOCSSについてまとめてみた

はじめに

こんにちは、まーです。
【Twitter】
https://twitter.com/KPz234iNYoOQZF5
今回は、学習の備忘録としてCSS設計の手法であるBEM、SMACSS、FLOCSSについてまとめてみたいと思います。

BEM

BEMってなに？

「Block Element Modifier」の略です。
Block：大元の要素
Element：Blockの中の要素
Modifier：変化の状態を表す要素（active、大きさ、色など）
という感じです。

ルール

「Block__Element--modifer」のように__（アンスコ2つ）と--（ハイフン2つ）で繋ぎ合わせて、クラス名をつけます。
このように、クラス名を見れば、どの要素でどんな状態の要素なのかがわかるようになります。

サンプルコード

HTML

<ul class="menu">
  <li class="menu__item--large">Large Item</li>
  <li class="menu__item--active">Active Item</li>
</ul>

SASS

.menu {
  list-style-type: none;
}
.menu__item {
  width: 80px;
  margin-bottom: 12px;
  text-align: center;
  &--large {
    width: 100px;
  }
  &--active {
  color: #545454;
  background: #fff;
  }
} 

メリット

前述したとおり、クラス名を見ただけでどんな要素かが分かります。最初は、長くてごちゃごちゃしてると思いますが、コードの可読性が上がり、後々の保守性、にも繋がります。

SMACSS

SMACSSってなに？

「Scalable and Modular Architecture for CSS」の略です。
CSSを５つに分類して、書きましょうというCSS設計の手法になります。

ルール

Base：サイト全体に影響するもの（リセットCSSや変数の定義など）
Layout：ページのレイアウト（ヘッダー、フッターなど）
Module：再利用可能なパーツのこと（繰り返し使うボタンなど）
State：状態によって見た目が変化するもの（色の変化など）
Theme：テーマごとのスタイルのこと（サイトをダークモードにガラッと変えるなど）
このような５つのディレクトリを作成し、各ディレクトリにファイルを保存していきます。

命名規則は、「１ページに１度しか登場しないレイアウト」についてはIDセレクタが容認されています。例えば、ヘッダーやフッター、サイドバーなんかがこれに当たります。
また、LayoutカテゴリやStateカテゴリにあたるクラスには、接頭辞をつけることが推奨されています（.l-header、.is-panel-activeなど）。
※.is-activeなどと命名してしまうと、active状態にしたい要素が他にもあったときにどれがどれだかわからなくなってしまうので、どの要素のことなのかをしっかり記述する

メリット

共通で使えるものは共通化できるので再利用性が高く、効率的な開発が行えます。
また、ディレクトリごとに分けてるので見やすく、管理しやすいです。
さらに、優先順位がはっきりしているのでCSSがこんがらがりにくくなっています。

FLOCSS

FLOCSSってなに？

BEMやSMACSSなど色んなCSS設計の手法を取り入れたハイブリッドなものです。
比較的新しく、日本人の方が考案したもので、ドキュメントも日本語でありがたいです。こちらの「柴犬でもわかるFLOCSS」は、僕も読ませていただいたのですが、非常に分かりやすくておすすめです。

ルール

Foundation：デフォルトのスタイル（リセットCSSや変数の定義など）
Layout：ページのレイアウト（ヘッダー、フッターなど）
Object：繰り返し使われるもの
Component：再利用できるモジュール
Project：プロジェクトごとのスタイル
Utility：装飾に関するもの

SCSS
  ├─Foundation
  | ├─_base.scss
  | └─_reset.scss
  ├─Layout
  | ├─_header.scss
  | └─_main.scss
  └─Object
    ├──Component
    |  └─_btn.scss
    ├──Project
    |  └─_articles.scss
    └──Utility
       └─_margin.scss

ディレクトリ構成はこんな感じで、まず、「Foundation」、「Layout」、「Object」の３レイヤーに分かれ、さらにObjectレイヤーの子レイヤーとして、「Component」、「Project」、「Utility」の３つに分類されます。
命名規則は、BEMが採用されています。また、SMACSSと同様にそれぞれのカテゴリにあたるクラスには、接頭辞をつけてあげます。（.l-headerや.c-btnみたいな感じ）

メリット

ディレクトリ構成をきっちり決めてあげることで、どのディレクトリに編集したいファイルがあるのかを予測しやすく、メンテナンス性が上がるので、複数人で開発するときに、FLOCSSの恩恵をより感じられるのではないかと思います。

おわりに

最後まで、お読みいただきありがとうございます！
個人開発では、FLOCSSを採用しているのですが、慣れるまではglobでファイルをまとめるのに戸惑ったり、クラス名をどう命名するかにいちいち悩んだりととても大変でした。（今でも悩みますが。。。）
実際、CSS設計に明確な正解はなく、現場によってルールが決まっているということなので、基本的なことは頭に入れて、柔軟に対応したいと思います。

これからも学んだことをどんどんアウトプットしていきたいと思います。
それでは！