BEM記法とFLOCSSで保守性の高いCSSに

Webサイト制作
サイト制作
2021.01.25
2021.01.26


WEBサイト制作をしているとよく他の方が作成したサイトの修正やコンテンツの追加作業などが発生します。

また、自分が作ったサイトを他の方が引き継ぐ等は日常茶飯事です。

その時自分には分かりやすくても他の人には分かりづらい様なコーディング記法、または逆の立場となっても確認などに手間取り、パフォーマンスが落ちる原因となってしまいます。

今回はコーディングルールの一つ「BEM(ベム)」、併せて使うとより効率アップが期待できる「FLOCSS(フロックス)」についてご紹介したいと思います。

BEM(ベム)とは

BEMとはBlock Element Modifierの略称で、CSSの書き方のルールです。

HTMLの要素は以下3つのいずれかに当てはまるという考え方です。

  • Block:大きな要素
  • Element:Blockを構成する要素
  • Modifier:BlockとElementのスタイルの一部を変えるもの

BEMのメリット

  • class名を広範囲で使いまわすことがなくなるので、CSSを修正した時意図しないところまで変更されてしまう事がなくなります。
  • ルールを定めることで複数人でコーディングを行った時にもそれぞれバラバラの書き方にならず、統一性が生まれる為メンテナンス性も上がります。
  • もっとも有名な命名規則のためプロジェクトメンバーが変わっても対応がしやすい。

BEMのデメリット

  • アンダースコアやハイフンを2本ずつ使うのでclass名が長くなりがち

BEMの基本的な書き方

CSSの場合

3つの要素を実際にクラス名で使う場合、

.block__element-modifier { ... }

となります。

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

Block

Blockは大枠になる部分、ナビゲーションや入力フォーム、ヘッダー/フッター等。

Blockは独立していて再利用することが可能。基本1単語で命名します。

Element

Elementsは、Blockのなかに配置される部品です。

Blockの中でのみ存在することができ、Blockにアンダースコア2つつけ、続けて1単語をつけます。

Modifier

Modifierは、BlockとElementの見た目や動きが異なるもの、色等ちょっとした違いがある場合に使用します。

BlockもしくはElementにハイフン2つにつづけて1単語をつけます。

ファイルの場合

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

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

MindBEMding について

mindBEMdingはBEMの概念を利用したCSSの書き方のルールです。

CSS設計手法、CSS命名規則などと呼ばれる手法の一つで、どのようにCSSを書いていくか、どのようにclass名を付けていくかなどを取り決めたものです。

その他のルール

単語をつなげたい場合はハイフン一つ

Modifierなど1単語ではわかりにくい場合や1単語で表しきれない場合は単語をハイフンでつなぎます。

CSSはclassに指定する(要素セレクタやidには指定しない)

CSSは基本的にclassに対して指定します。要素セレクタやid属性には指定しません。

block__element__elementのような書き方はできません

見た目もわかりにくくなる為、この場合は新しくBlockを切りましょう。

Blockの中にBlockを入れることは可能です。もしくは別名のElementとして用意します。

BEMやmindBEMdingは全てに従うというよりは皆それぞれ独自のルールも用いて運用していることが多いです。

続いて「FLOCSS」「Sass」を併用し更に効率化する方法をご紹介します。

BEMを「FLOCSS」「Sass」と組み合わせて効果を最大化

BEMとFLOCSSを使ったCSS設計は、Sass(scss)との相性も良く、HTMLの記述が「冗長」になるデメリットをCSSの記述の「楽さ」で十分にカバーできると思います。

以下、それぞれの記法について解説していきます。

※Sassについては以下の記事をご覧ください。

FLOCSSとは

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

文字通りFLOCSSでは「Foundation」「Layout」「Object」の3つのレイヤーと、「Object」の3つの子レイヤーで構成され、コーディングの設計においてデザインを面でとらえるのではなく、点や線でとらえる設計手法で再利用性、拡張性を意識した設計を目指すものです。

近年のJavaScriptフレームワークでも積極的に取り入れられている「モジュール」の概念を取り入れたCSSの設計手法で、1つのCSSファイルにまとめて記述するのではなく、スタイルを適用するレイヤーやパーツごとに、ファイル単位で分割・モジュール化して管理しやすくします。

Foundation

reset.cssなどデフォルトのスタイル(下地)を記述するCSSファイルを格納します。

Layout

ページを構成するheader, main, footerという大きな枠のスタイルを記述するCSSファイルを格納します。

Object

プロジェクト内で繰り返し使われるビジュアルパターン。さらに下記の3つのレイヤーに分けられます。

Component

再利用できる小さな単位のモジュール。

ボタンや加工を施したイメージ要素、フォームのスタイル等がこれにあたります。

Project

プロジェクト内でスタイルパターンなどを定義いくつかのComponentを組み合わせて作ります。

Utility

CompornentやProjectでは定義しきれない例外的なスタイルを定義します。

色やサイズなどちょっとしたスタイルを当てる時に使用します。

Foundation、Layout、Objectをそれぞれのレイヤーとしてとらえ上から下にスタイルの定義が流れてくるイメージです。

Foundation → Layout → Objectのレイヤーの順番でCSSを読み込み、下にいくほど具体的なスタイルを定義していきます。

そのためLayoutのレイヤーのCSSファイルの前にObjectのレイヤーのCSSファイルを読み込んではいけません。

また、!importantなど強制的にスタイルを書き換えるようなスタイルの指定も基本的には使いません。

FLOCSSの接頭辞

各レイヤーのブロックはそれぞれが属するレイヤーの頭文字をクラス名に付けます。

レイヤー 命名例
Layout .l-header、.l-footerなど
Object/Compornent .o-button、c-main-imageなど
Object/Project .o-article-list、p-wrighterなど
Object/Utility .o-display、.u-partなど

さらに最初に触れたBEM記法をこれに組み合わせ、再利用可能で修正にも強く、スタイルのバッティングも起こりづらい設計となります。

例:
.p-Block
.p-Block__Element
.p-Block__Element__Element–Modifier

そしてSass(scss)を使うことで更に恩恵が得られます。

FLOCSSとSass(scss)を組み合わせる

cssフォルダの階層例

css ┬ foundation – reset.scss, base.scss, setting.scss 等
  ├ layout – header.scss, main.scss, footer.scss 等
  ├ object – compornent.scss, project.scss, utility.scss
  └ style.scss

FLOCSSとSCSSを組み合わせた設計をする際、各レイヤーをフォルダ分けしておくと管理しやすいです。

それぞれのレイヤーごとにcssを記述し、style.scssでまとめます。

style.scssの記述例

/* Mixin */
@import 'foundation/settings';

/* Reset */
@import 'foundation/reset';

/* Foundation */
@import 'foundation/base';

/* Header */
@import 'layout/header';

/* Main */
@import 'layout/main';

/* Footer */
@import 'layout/footer';

/* Compornent */
@import 'object/compornent';

/* Project*/
@import 'object/project';

/* Utility */
@import 'object/utility';

※読み込むレイヤーの順番に注意してください。必ずFoundation → Layout → Objectの順番となります。

各モジュールの記述例

上記のBEMとFLOCSSの記法に則って書かれたHTMLのモジュールをSCSSで装飾します。

<div class="p-article-list">
	<article class="p-article-list__item">
		<header class="p-article-list__item__header">
			<h2>記事のタイトルが入ります</h2>
		</header>
		<div class="p-article-list__item__description">
			<p>テキストが入ります</p>
		</div>
	</article>
	<article class="p-article-list__item">
		<header class="p-article-list__item p-article-list__item__header--red">
			<h2>記事のタイトルが入ります</h2>
		</header>
		<div class="p-article-list__item__description">
			<p>テキストが入ります</p>
		</div>
	</article>
</div>

SCSSの記述例

.p-article-list{
	width: 100%;
	max-width: 400px;
	margin-left: auto;
	margin-right: auto;
	&__item{
		padding: 20px;
		border-bottom: 1px solid #000000;
	}
	&__item__header{
		font-weight: bold;
		font-size: 20px;
		margin-bottom: 10px;
	}
	&__item__header--red{
		color: red;
	}
	&__item__description{
		font-size: 14px;
	}
}

BEMとFLOCSSを使ったコーディングはメリットばかり

「再利用性」「修正への強さ」「バッティングの起きづらさ」「SCSSの書きやすさ」と、BEM記法とFLOCSSの組み合わせを使った設計はメリットがたくさんあります。

またFoundation、Compornent、Utilityは一度作ってしまえば別のプロジェクトでも再利用可能なものが多く、限られた期限と予算で高品質のWEBサイトを作らなければいけない時に非常に有用となります。

誰が作ったにかかわらず誰でも触りやすく、分かりやすいコードになる事と思います。

無駄な確認や修正のしにくさを解消し、効率のよいストレスフリーなコーディングを行いましょう。

SEOやWEB制作に関する情報を検索

コラム

ピックアップコラム

最新コラム

人気コラム

過去の記事

ご質問やご相談などお気軽にお問い合わせください。

お電話でのお問い合わせはこちら

03-5829-9912

受付時間:平日10:00~19:00(土・日・祝日を除く)