ウェブサイトは完成してからも改修が行われることが前提ですので、コーディング時には拡張性や運用保守のしやすさ、またコードの読みやすさなどが重要になります。さらに大規模なサイトの場合ですと複数人で開発することもありますので、コーディングのルールや設計方針なんかも必要になります。

今回は「FLOCSS」や「BEM」といったCSSにおけるコーディング設計方法について考えていきたいと思います。

近年のCSSコーディングについて

サイトのデザインやレイアウトを表現するCSSですが、近年ではCSSで様々な表現や機能を実現できるようになりました。それに合わせてよりコーディングが複雑にもなってきています。そこでCSSを効率よく書けるように、SassやLessといったCSSの拡張メタ言語といったものが普及してきました。

それだけでなくclassなどの命名規則やファイルの構成といったところで規約なども考えられるようになりました。規約を設けることで共通の認識ができたり、運用保守においてたくさんのメリットが生まれました。

ここでいうコーディング設計の規約は数多くの考えかたや種類があるのですが、今回は「FLOCSS」と「BEM」についてまとめていきたいと思います。

フォルダ・ファイル構成のベースとなる考え方の「FLOCSS」

CSSファイルが複数あるケースでは、構成のルールが無いと要素のスタイルを変更したい場合に、どのファイルを編集すればいいかわからなくなります。そこでFLOCSSという考え方を使います。

FLOCSSとは「Foundation」「Layout」「Object 」のレイヤーからなるファイルの構成ルールです。わかりやすくいうとスタイルの目的や部位によってCSSファイルを切り分ける考え方です。この中でObjectにはさらに「Component」「Project」「Utility」という3つのレイヤーに分かれます。

まず「Foundation」ですが、ここにはスタイルのリセット（reset.cssやnormalize.css）や基本となるスタイル、Sassであれば変数をまとめたりします。次に「Layout」ではページを構成する共通部分の要素や大まかな全体のスタイルを記述していきます。

最後の「Object 」にはモジュール化されたパーツや、それらを構成する要素に関するスタイルを記述します。先述の通り、さらに3つのレイヤーに分けられ「Component」には共通部分の要素を。「Project」にはページ固有といった共通ではない要素のスタイルを記述していきます。「Utility」はそれらの区分とは別に汎用性のあるスタイルをまとめていきます。

FLOCSSでは、数多くのCSSファイルが必要となるケースや、最終的にコンパイルして複数のファイルを1つに結合するSassを使う場合に効果的です。以下に例としてFLOCSSを採用したファイル構成を上げております。

┳ style.scss
　　┣ 【foundation】
　　　　┣ _reset.scss（スタイルリセット用）
　　　　┗ _variable.scss（変数の値まとめ用）
　　┣ 【layout】
　　　　┣ _header.scss（ヘッダーに適用するスタイル）
　　　　┣ _footer.scss（フッターに適用するスタイル）
　　　　┗ _sidebar.scss（サイドバーに適用するスタイル）
　　┗ 【object】
　　　　┣ 【component】
　　　　　　┗ _common.scss（共通部分の要素に適用するスタイル）
　　　　┣ 【project】
　　　　　　┣ _frontpage.scss（トップページ内で使用するスタイル）
　　　　　　┣ _archive.scss（一覧ページ内で使用するスタイル）
　　　　　　┗ _single.scss（詳細ページ内で使用するスタイル）
　　　　┗ 【utility】
　　　　　　┣ _mg.scss（マージンの値まとめ用）
　　　　　　┣ _pd.scss（パディングの値まとめ用）
　　　　　　┣ _btn.scss（ボタン要素に適用するスタイル）
　　　　　　┣ _heading.scss（見出し要素に適用するスタイル）
　　　　　　┣ _form.scss（フォーム要素に適用するスタイル）
　　　　　　┣ _list.scss（リスト要素に適用するスタイル）
　　　　　　┗ _table.scss（テーブル要素に適用するスタイル）

これらは一例ですのでプロジェクトによってどのように切り分けるかを考える必要があります。またFLOCSSではclassの命名規則としてF・L・Oの頭文字をそれぞれ対応するスタイルにプレフィックスとして以下のように追記します。

.l-header {
   width: 100%;
   background: #fff;
}
.o-btn-default {
   border: 1px solid #ddd;
   text-align: center;
}

classの命名規則に用いる考え方の「BEM」

ファイルやフォルダ構成が整っていても、その中でclass名がバラバラだと混乱してしまいます。ですのでclass名にも命名規則を設けることも大切です。その時に用いる考え方に「BEM」というものがあります。

BEMというのは「Block」「Element」「Modifier」のそれぞれ頭文字を取ったもので、Blockは要素の集まり、Elementは最小単位の要素、Modifierはそれら要素のステータスを示します。（この中でModifierはさらにkeyとvalueという形で表現されるケースもあるようです）

少しわかりにくいので実際に使う命名規則を見ていきたいと思います。以下は例としてサイトのグローバルナビでBEMの命名規則に沿ってclass名をつけています。

<nav class="gnav">
   <ul class="gnav-list">
     <li class="gnav-list__item gnav-list__item--current"><a href="">Navi 1</a>
     </li>
     <li class="gnav-list__item"><a href="">Navi 2</a>
     </li>
     <li class="gnav-list__item"><a href="">Navi 3</a>
     </li>
     <li class="gnav-list__item"><a href="">Navi 4</a>
     </li>
  </ul>
</nav>

また、BEMでは「_」（アンダースコア）と「-」（ハイフン）を使い分けるという決まりがあります。以下のようにBlockとElementの間にはアンダースコアを2つ、ElementとModifierの間にはハイフンを2つで繋げます。

Block__Element--Modifier

// Blockが複数のキーワードにわたる場合
Block1-Block2__Element--Modifier

ただしこの形ですとclass名が長くなるという点が気になりますよね、、Sassを使う場合は入れ子で記述できるのでその点も踏まえてカスタマイズしてみます。

<nav class="gnav">
   <ul class="gnav-list">
     <li class="__item --current"><a href="">Navi 1</a>
     </li>
     <li class="__item"><a href="">Navi 2</a>
     </li>
     <li class="__item"><a href="">Navi 3</a>
     </li>
     <li class="__item"><a href="">Navi 4</a>
     </li>
   </ul>
</nav>

どうでしょうか、かなりスッキリしましたね！Blockについては必要最低限の区分にとどめ、ElementとModifierは独立させました。Sassでスタイルを記述する場合では入れ子になるのでこのような形でもそこまでわかりにくくならないのではないでしょうか。

.gnav-list {
   // .gnav-listのスタイル
    .__item {
       // .gnav-list.__itemのスタイル
        .--current {
          // .gnav-list.__item.--currentのスタイル
        }
    } 
}

いかがでしょうか、FLOCSSやBEMといったコーディング設計を採用することで、改修時の混乱を防げたり、複数人での運用保守がしやすくなったり、またclassの命名規則で迷うことも少なくなるのではないでしょうか。

これらはあくまでも厳守することが重要ではなく、それぞれのプロジェクトや案件の形によって柔軟に捉えることが大切です。コーディングの効率化にぜひ参考にしてみてはいかがでしょうか。

（参考にさせていただいたサイト様）
CSSの設計 – FLOCSSをベースにしたファイルの構成と命名規則を考える
BEMを参考にしたCSS設計