0%

DevelopWEB開発・運用ノウハウ

Posted:2018.01.27

CSSのメンテナンスを向上させるコーディング設計の「FLOCSS」と「BEM」について考えてみる

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

 

今回は「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設計

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】