CSS設計手法｜BEMとFLOCSSでスコープを絞ったクラスを作ろう

「CSSクラスのスタイルが想定通りに当たらない…」
「CSSにも設計手法があるの？」
「BEMやFLOCSSってなに？」

上記のような悩みを抱えるWebエンジニア向けの記事です。

ということでこんにちは！Webシステム開発部の稲垣です。

今回はCSSの設計手法について解説します。

なぜCSSの設計が必要なのか？【スコープ管理のため】

なぜCSSにも設計が必要なのでしょうか？

答えは単純で、スコープ管理のためです。

例えばstyle.cssに.btnクラスを記述してindex.htmlのボタン要素に適用していたとします。

index.html

<button class="btn">hoge</button>

style.css

.btn {
  background: #fff;
  color: #000;
  display: block;
}

次に、hoge.htmlのボタン要素は赤色にしたかったのでhoge.cssに.btnクラスを作りました。

hoge.css

.btn {
  background: #e74c3c;
  color: #fff;
  display: block;
}

すると、index.htmlのボタン要素も赤色になってしまいました。

当然ですね。

index.htmlでstyle.cssとhoge.cssの両方を読み込んでいたとしたら、後から読み込んだhoge.cssによって.btnクラスが上書きされてしまうからです。

CSSはグローバルスコープである

CSSのクラス名は一意（ユニーク）である必要があります。

しかし、CSSはグローバルスコープです。

つまり、読み込んだCSSファイル全てが同じスコープで管理されます。

なので、別ファイルで作成した同じ名前のクラスは、どちらかが上書きされてしまうんです。

CSSでもスコープを限定するために命名規則を使おう

「クラス名が同じだと上書きされる」のであれば、解決策は「全て異なるクラス名をつける」です。

しかし、チームでWebアプリ開発する際や、Webサイトをページごとに制作している場合、みんなが好き勝手なクラス名をつけるという無法地帯が完成します。

赤いボタンを作るクラス名1つでも、”.btn-red”とか”.btn-primary”とか”.btn-danger”など色々考えついてしまうわけですよ。

そこで他言語と同様に、CSSもしっかり設計をして命名規則を決めてあげましょう。

そしてCSSの命名規則の設計に役立つのがBEMとFLOCSSです。

BEMとFLOCSSとは何か

BEM（MindBEMding）は一意なクラスを作るための命名規則

BEMとはBlock Element Modifierの略称です。

BEMはこの3つを組み合わせてクラス名を決めるCSS設計のことをさしています。

BEMの中でも「MindBEMding」という手法を解説します。

BEMによるクラスの命名規則

3つの要素を実際にクラス名で使う場合、以下のようになります。

.block__element-modifier { ... }

BlockとElementはアンダースコア2つでつなぎ、modifierはハイフン1つでつなぎます。

例えば記事のタイトルなら「article__title」といった感じです。

BEMによるファイルの命名規則

ファイルは「block名.scss」という名前で作っていきます。

articleに関するBlockのスタイルを記述するファイルなら、「article.scss」となります。

FLOCSSはCSSファイルをモジュール化するための命名規則

FLOCSSは、近年のJavaScriptフレームワークでも積極的に取り入れられている「モジュール」の概念を取り入れたCSSの設計手法です。

1つのCSSファイルにまとめて記述するのではなく、スタイルを適用するレイヤーやパーツごとに、ファイル単位で分割・モジュール化して管理しやすくします。

FLOCSSのディレクトリ構成

一般的なFLOCSSのディレクトリ構成は以下の通りです。

css
 ┣ Foundation
 ┣ Layout
 ┗ Object
    ┣ Component
    ┣ Project
    ┗ Utility

それぞれのディレクトリの意味は以下です。

最初はComponentとProjectの違いが分からないと思います。

パーツの大きさで考えるのが分かりやすいです。

パーツの大きさは「Component < Project」です。

小さなComponentが集まってProjectを作るイメージです。

この考え方はAtomic Designを参考にすると良いと思います。

CSS設計のベストプラクティスを考えてみる

僕が普段からよく使っているファイル・ディレクトリ構成は以下の通りです。（※あくまで一例です）

css
 ┣ Foundation
 ┃  ┗ base.scss
 ┣ Layout
 ┃  ┣ footer.scss
 ┃  ┗ header.scss
 ┗ Object
    ┣ Component
    ┃  ┣ background.scss
    ┃  ┣ btn.scss
    ┃  ┣ module.scss
    ┃  ┗ section.scss
    ┣ Project
    ┃  ┣ article.scss
    ┃  ┣ grid.scss
    ┃  ┣ icon.scss
    ┃  ┗ media.scss
    ┗ Utility
       ┣ display.scss
       ┗ text.scss

base.scss

スタイルのリセットやSassの基本設定などを記述しています。

footer.scssとheader.scss

には、HTMLのヘッダーとフッターで使うスタイルを記述しています。

Component配下のモジュール

シンプルなパーツのスタイルを記述しています。

Project配下のモジュール

いくつかのパーツを組み合わせた要素にスタイルを当てるためのスタイルを記述しています。

Utility配下のモジュール

{display: none;}や{display: block;}を切り替えるためのdisplayモジュールや、テキストの色やサイズをちょっと変えたいときのためのtextモジュールを配置しています。

BEMとFLOCSSを、Sassと組み合わせて効果を最大化しよう

BEMとFLOCSSを使ったCSS設計は、Sassとの相性が良いです。

Sassで使える&記法を使うことで、以下のように記述できるからですね。

p-grid {
  display: flex;
  &__list {
    @extend .p-grid;
    flex-flow: row wrap;
  }
}

/* .p-grid__listというクラスが作れる */

Sassについてはこちらの記事で解説しています！

【使わないと損】CSSを楽に書ける！Sassのメリットと導入方法「もっと楽にCSSを書きたい」という方のために、CSSの記述を数倍効率化する"Sass"をご紹介します。Sassには「再利用性」と「作業効率」を高めるメリットがあり、BEMやFLOCSSといったCSS設計と相性が良いです。この記事ではnode-sassとnode-sass-globbingの導入方法を解説します。...

ABOUT ME

稲垣 貴映

サーバーエンジニア兼Webフロントエンジニア。 新卒で独立系SIerに入社後、金融系システム基盤の構築・運用を3年間経験。 プログラミングを独学していた頃に、CEOの馬谷が開講していたSwiftスクールに通い、2019年9月に入社。 趣味はブラジル音楽の演奏。