CSSの命名規則について考える

BEM(ベム)について

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

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

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

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

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

Block(ブロック)

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

Element(エレメント)

Blockの中に存在する要素の名前です。
そのBlockの中のどういう役割をするか、名前で分かるようにすると良いでしょう。
BEMは、必ず頭にBlock名がつくので、重複しないclass名になります。
Element以下の名前は、パターンでつけることができます。

Modifier(モディファイア)

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

BEMを使う前に

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

classのみを使用する

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

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

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

HTML

CSS

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

HTML

CSS

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

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

すでに行っていることだと思いますが、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は、ボタンのモジュールとすると、こんな感じでしょうか。

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

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

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

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

それでは、また!

最強のCSS設計 チーム開発を成功に導くケーススタディ
堀口 誠人
SBクリエイティブ
売り上げランキング: 418,929