BEMとFLOCSSを用いたコーディングの設計手法について解説

「BEMって何？」

「FLOCSSって何？どうやって読むの？」

「BEMやFLOCSSって言葉は聞いたことあるけど、それらを用いるとどんなメリットがあるの？」

という風に思う人もいるのではないでしょうか？

でも安心してください。

書籍や動画などでHTMLとCSSで簡単なWebサイトのコーディングを模写したことがある人であれば、「BEM」と「FLOCSS」はさほど難しくない内容です。

この記事では、BEMとFLOCSSの内容とメリット・デメリットについて解説します。

BEMとFLOCSSを用いることで、初心者が陥りがちな

「クラス名の付け方が分からない…」

「CSSでスタイルを上手く当てられない…」

といった悩みを解消できます。

是非最後までご覧ください。

1 BEMとは何か
2 FLOCSSとは何か
3 まとめ

BEMとは何か

プログラミング初心者であってもHTMLとCSSでコーディングをするときに、自分でゼロからclass名を考えなければならないときがあります。

そんなときにclass名を適当に付けてしまい、その後CSSでスタイルを当てようとしても上手く当てられなかった経験をしたことがありませんか？

そんな時にclassを付け方（ルール）があると便利だと感じるはずです。

そこで使われるルールがBEMと呼ばれるものです。

BEMとは「Block」「Element」「Modifier」の頭文字を取ったものになります。

【Block】__【Element】–【Modifier】

という順番で書きます。

//例
<header class="l-header">
  <div class="l-header__inner">
    <img class="c-header__logo--blog" src="logo.png" alt="ウェブ活公式BLOG">
    <img class="c-header__logo--product" src="logo_product.png" alt="ウェブ活公式BLOGの製品">
    <nav class="c-header-nav">
      <ul class="c-header-list">
        <li class="c-header-list__item"><a href="/">ホーム</a></li>
        <li class="c-header-list__item"><a href="/">ブログ</a></li>
        <li class="c-header-list__item"><a href="/">お問い合わせ</a></li>
      </ul>
    </nav>
  </div>
</header>

//例

<li class="c-header-list__item"><a href="/">お問い合わせ</a></li>

</ul>

</nav>

</div>

</header>

このBEMのそれぞれの特徴を以下のようになります。

Block

Blockとは、ページの構成するルート（階層構造の根本）となる大きな要素になります。

// 例
<div class="l-header"></div>
<div class="l-footer"></div>

// 例

Element

Elementとは、Blockの構成要素になります。

Elementは「_（アンダースコア）」を2つをBlockに繋げます。

// 例
<ul class="c-header-list">
  <li class="c-header-list__item"><a href="/">ホーム</a></li>
  <li class="c-header-list__item"><a href="/">ブログ</a></li>
  <li class="c-header-list__item"><a href="/">お問い合わせ</a></li>
</ul>

// 例

<li class="c-header-list__item"><a href="/">お問い合わせ</a></li>

</ul>

アンダースコアの前にある「header-list」がBlockに当たり、「item」がElementに当たります。

Modifier

Modifierとは、BlockとElementが変化したもの（特徴）を表しています。

ModifierはElementの後に「-（ハイフン）」2つを繋げます。

<div class="l-header__inner">
  <img class="c-header__logo--blog" src="logo.png" alt="ウェブ活公式BLOG">
  <img class="c-header__logo--product" src="logo_product.png" alt="ウェブ活公式BLOGの製品">
</div>

</div>

Elementである「logo」の後ろにハイフン2つを繋いだ「blog」「product」がModifierになります。

実際にBlockとElementを使うことがほとんどで、Modifierを使うことはあまりないです。

【Block】__【Element】–【Modifier】の形で、どのBlockを親としているのかを明確にすることで名前の重複を避けられることがBEMのメリットです。

ただ一方で、class名が長くなりやすいデメリットもあります。

少なくともBEMを使うことで、初学者が陥りがちな「class名が出てこない…」という悩みから抜け出せるのではないでしょうか？

FLOCSSとは何か

FLOCSS（フロックス）とは、「Foundation」「Layout」「Object」の頭文字とCSSを組み合わせたものになります。

FLOCSSはスタイルの目的や部位によってCSSファイルを切り分ける考え方で、プレフィックス（接頭辞）を付けるという特徴があります。

Sassを使うときにFLOCSSでファイル構成をすると、以下のようになります。

// 例
css/
├── foundation/
│   └── reset.scss
├── layout/
│   └── _header.scss
├── object/
│   └── component/
│   │    └── _btn.scss
│   └── project/
│   │    └── _home.scss
│   └── utility/
│        └── _util.scss
└── style.scss

// 例

css/

├── foundation/

│ └── reset.scss

├── layout/

│ └── _header.scss

├── object/

│ └── component/

│ │ └── _btn.scss

│ └── project/

│ │ └── _home.scss

│ └── utility/

│ └── _util.scss

└── style.scss

FLOCSSの「Foundation」「Layout」「Object」についてそれぞれ見ていきましょう。

Foundation

Foundationとは、デフォルトのスタイルを記述するCSSやreset.cssを指定します。

// 例
html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

a {
  text-decoration: underline;
  color: #2b70ba;
}

a:hover,
a:active,
a:focus {
  text-decoration: underline;
  color: #5997d9;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

// 例

html {

box-sizing: border-box;

}

*:before,

*:after {

box-sizing: inherit;

}

a {

text-decoration: underline;

color: #2b70ba;

}

a:hover,

a:active,

a:focus {

text-decoration: underline;

color: #5997d9;

}

img {

max-width: 100%;

height: auto;

vertical-align: middle;

}

Layout

Layoutとは、ページを構成するheaderやfooterなどの大きな枠のスタイルを記述するCSSファイルが含まれます。

接頭辞は先頭に「.l-」という形で使われます。

// 例
.l-header {
  position: relative;
}
.l-footer {
  display: inline-block;
}

// 例

.l-header {

position: relative;

}

.l-footer {

display: inline-block;

}

Object

Objectとは、プロジェクト内で繰り返し使われるCSSファイルが含まれます。

その中でもObjectは、「Component」「Project」「Utility」の3つのレイヤーに分けられます。

Component

Componentとは、再利用できる共通部分の要素（モジュール）になります。

接頭辞の先頭に「.c-」という形で使われます。

// 例
.c-btn {
  padding-top: 10px;
  padding-right: 62px;
  padding-bottom: 10px;
  padding-left: 36px;
  background-color: #fff;
  color: #000;
  border-style: solid;
  cursor: pointer;
}

// 例

.c-btn {

padding-top: 10px;

padding-right: 62px;

padding-bottom: 10px;

padding-left: 36px;

background-color: #fff;

color: #000;

border-style: solid;

cursor: pointer;

}

Project

Projectとは、ページ固有のいくつかのComponentを組み合わせて作るものになります。

接頭辞の先頭に「.p-」という形で使われます。

// 例
.p-home {
  position: relative;
  overflow: hidden;
}

// 例

.p-home {

position: relative;

overflow: hidden;

}

Utility

Utilityとは、余白の調整や非表示などのスタイルを当てるときに使われるものです。

接頭辞の先頭に「.u-」という形で使われます。

// 例
.u-hidden-sp {
  display: none !important;
}

// 例

.u-hidden-sp {

display: none !important;

}

このように、FLOCSSでは数多くのCSSファイルが必要となるケースやコンパイルして複数のファイルを1つに結合するSassを使用するときに便利です。

FLOCSSはGitHubの公式ページがあります。

そちらも参考にしてみてください。

まとめ

いかがでしたか？

今回はBEMとFLOCSSを用いたコーディングの設計を学びました。

聞きなれない言葉が多くて最初は戸惑うと思いますが、慣れてくるとBEMとFLOCSSといったコーディングの設計のルールが如何に重要であるかを理解できるはずです。

BEMとFLOCSSは実務でも使われるコーディングの設計のルールの１つなので、覚えておいて損はありません。

この記事があなたのコーディング学習のお役に立てれば嬉しいです。

最後までご覧いただきありがとうございました。

ウェブカツは「年収1000万円」を目指すフリーランスITエンジニアを育成するオンライン最大級のプログラミングスクールとして、元医師やBIG4税理士法人会計士など高学歴高経歴な方から、中卒土方、40代主婦、海外在住者など様々な方が通われています。
現役ITエンジニアとして活躍し、富裕層でプロのファイナンシャルプランナーでもある顧問「かずきち」が教える【フリーランスITエンジニアになって10年で1億の資産を築く方法】など他のプログラミングスクールとは全く異なり、「転職をゴール」とはせずに「会社に依存せずに外で稼げる力」を身につけさせています。