ツクメモ的、CSSの命名規則、BEM（ベム）の使い方決定版！

2015-04-15
CSS

どうも、もりさんです。
すっかり月一更新となってしまいました。
以前、CSSの命名規則について考えるという記事を書きましたが、実際にBEMを使用してみて、すごく良かったので、まとめてみます。

BEM（ベム）について

CSSの命名規則の一つで、Block（ブロック）、Element（エレメント）、Modifier（モディファイア）の略です。

Elementの前には_（アンダーバー）二つ、Modifierの前には-（ハイフン）二つで区切って、class名をつけます。

.block__element--modifier{
     ...
}

これらの区切り（セパレータ）は、必ずしも二つである必要はありません。

しかし、class名を見るだけで、BEMを利用していると分かるので、二つにした方が良いと、考えています。

それ以外、名前のつけ方には、特に難しいことはありません。

Block（ブロック）

グループ化された部品の名前になります。 Blockが親の名前になるので、重要です。また、複製しても使用できるように作る必要があります。

Element（エレメント）

Blockの中に存在する要素の名前です。そのBlockの中のどういう役割をするか、名前で分かるようにすると良いでしょう。

BEMは、必ず頭にBlock名がつくので、重複しないclass名になります。 Element以下の名前は、パターンでつけることができます。

Modifier（モディファイア）

同じElementでも、カレント状態であったり、異なる装飾を設定する場合、Modifierで名前をつけます。 KeyとValueという名前をつけて、分かりやすくすることができます。

.block__element--key_value{
     ...
}
.btn__link--state_current{
     ...
}

BEMを使う前に

BEMを使う前に、CSSの記述について、前提を守らなくてはいけません。

classのみを使用する

使い回せることが前提となるので、IDは使わず、classだけで設定しましょう。

子孫セレクタは使用しない

以下のようなやり方は、簡単ですが、使い回すためには、邪魔になります。 特定のタグに依存しているのもよくありません。

HTML

<nav class="nav">
    <ul>
        <li>ナビ1</li>
    </ul>
</nav>

CSS

.nav li{
     ...
}

子孫セレクタをやめて、面倒であっても、個別に設定しましょう。

HTML

<nav class="nav">
    <ul>
        <li class="nav-child">ナビ1</li>
    </ul>
</nav>

CSS

.nav-child{
     ...
}

ただし、ベースのスタイルとしてまとめて指定している、という考えであれば、問題ないです。

.nav a{
     color: #fff;
}

事前に全体のタグを設定する

すでに行っていることだと思いますが、BEMだから特別なことが必要ということはないです。事前にCSSリセットやNormalize.css、タグのデフォルト設定を行っておきましょう。

BEMを使うための概念

名前のつけ方は、これ以外のルールがないので、簡単ですが、実作業で使う場合、意外と混乱してしまうことがあります。

ツクメモ的BEMは、以下のようにしています。

部品は、最小から作ると良い

普通にコーディングをしていくと、大枠から作る方がいるかもしれません。

しかし、大枠というものは、あまり使い回すことはないので、それほど重要ではありません。
ボタンのように、使い回す可能性の高い小さい部品から設定すると、スムーズに進みます。

部品をレイアウトとモジュールに分ける

header、footer、sidebarの大枠や、position、floatの位置情報、width、padding、marginなどの間情報を持つものを、レイアウトと考えて部品化します。そのほかの要素をモジュールとして部品化します。

同じ大きさ、同じ位置でしか使わない、決め打ちの部品は、両方の要素を持つものとして考えます。

プレフィックスをつけると便利

名前にプレフィックスをつけると、部品が作りやすくなります。具体的には、title（ttl）、button（btn）、text（txt）などをBlock名に入れておくと、管理しやすくなると思います。

セパレータを2つにしていれば、ハイフンでもアンダーバーでも大文字区切り（キャメルケース）でも、好きなようにプレフィックスがつけられるので、便利です。

クラス名の長さ、シングルクラスにこだわらない

BEMで命名していくと、クラス名が冗長になり、マルチクラスにするとさらに長くなり、ソースの可読性が悪いと言われます。
しかし、ソースの可読性より、メンテナンスに重きを置いて、設定して良いでしょう。

クラス名が長くても、見て分かりやすい名前である方が重要です。

また、部品を二種類に分けて考えているので、レイアウトとモジュールのclassが設定されていることで、より使い回すことができます。

SASSなどを利用して、シングルクラスの設計にこだわるよりも、素のCSSでも問題なく記述でき、使い回せる部品に設計することが重要です。

入れ子が前提で良い

レイアウトの中にモジュールが入ることが多いはずなので、Blockは入れ子が前提になります。

また、大枠のBlockから作るとよく起きることですが、一つのBlockで対してElementが多すぎる（階層が深すぎる）状態は、あまりよくありません。

レイアウトとモジュールを意識して、Blockを作成しましょう。

複製に気をつける

部品を複製するとき、Elementだけを持ってきたりします。破綻しませんが、分からなくなるので、Blockから複製したり、中途半端なElementなどを一旦削除しましょう。

まとめ

nav-globalを、ボタンのレイアウトとします。 btn-gradaは、ボタンのモジュールとすると、こんな感じでしょうか。

<nav class="nav-global">
<ul class="nav-global__list">
	<li class="nav-global__btn btn-grada"><a class="btn-grada__link btn-grada__link--current" href="#">about</a></li>
	<li class="nav-global__btn btn-grada"><a class="btn-grada__link" href="#">blog</a></li>
	<li class="nav-global__btn btn-grada"><a class="btn-grada__link btn-grada__link--soon" href="#">contact</a></li>
</ul>
</nav>

レイアウトとモジュールの分け方であったり、一つのBlockでどこまでスタイルを作るのかは、迷う部分です。
それでも、普通に名前をつけるよりも、BEMの方が、あとで分かりやすいのは間違いないです。

更新が多いサイト、長い期間運営されるサイトでは、最初にしっかり命名（設計）しておくと、あとで楽になります。

逆にそれを怠ると、自分でコーディングしたサイトであっても、時間が空いて修正したとき、嫌いになることがあります。

あとから見た自分のコーディングが嫌になっても、サイトのことは嫌いにならないように、気をつけてください。

それでは、また！