WebサイトやLPの模写コーディングをしていると、色々な「クラス名」が何かのルールに従って使用されている事に気がつくと思います。
え、初心者の頃は、見た目を揃えるのに必死で「クラス名」なんて気が回らない？？
ですが、「分かりやすく」、「読みやすい」クラス名を付ける事が出来るだけで、効率的にWebサイトを作成出来ますし、修正も簡単になります。
また、複数人で作業する場合は、「命名規則」は必須です。
今日は、世界で最も良く使われているCSSの命名規則である「BEM」について学びましょう！
BEMとは何か？
BEMとは、「Block」、「Element」、「Modifier」の略で、要素を3つのいずれかに分類して命名していく命名規則です。
- Block
- Element
- Modifier
詳細については、後で具体例を挙げて見ていきます。
命名規則って何？
命名規則は、クラスやIDなどの名前を決めるルールの事です。
単純なものから、複雑なものまで色々な方法が存在してますが、以下の３つが最も有名です。
- BEM
- OOCSS
- SMACSS
命名規則のポイント
どんな命名規則を使っても、ポイントは共通です。
それは、
そのクラスにおけるCSSの「使用方法」と「役割」がハッキリしているか？
という事です。
パッと見て、そのクラスが「どこ」に、「どの様な形」で使われているのか分からないのは良くない命名です。
使用方法と役割が分かりやすいとは？
例えば、番号付きリストを使用してランキングを作成し、スタイルを書く場合を考えてみましょう、
後者の方が使用目的が明確で良い命名と言えます。
/* なんの数字か分からない */
.num {
font-size: 15px;
}
/* ランキングの数字というのが分かりやすい */
.ranking-num{
font-size: 15px;
}
BEM（MindBEMding）の名前の付け方
BEMの名前の付け方は簡単です。
Block Block__Element Block__Element--Modifier
Elementの前は、アンダースコア（_）２つで区切り、Modifierの前はハイフン（-）２つで区切ります。
この名前の付け方は、大元のBEMではなく、「MindBEMding」のものですが、一般的にはこちらの方が良く使われているので、こちらを覚えておけばOKです。
Blockとは何か？
Blockとは「独立したモジュール」で、Webサイトを構成するパーツです。
「独立」というのがキーワードです。
例えば、上の例だと、「Card」そのものが一つのブロックになっています。
Blockは独立しているので、Block毎移動させたり、Blockの中にBlockを含める事が可能です。
Elementとは何か？
Elementとは、Blockに所属する要素です。Elementという単語そのものが、「要素」って意味ですしね。
Elementは、必ず元となるBlockの中に入ります。
例えば、先ほどの「Card」ブロックの例を取ると、「画像」、「タイトル」、「本文」、「ボタン」がElementになります。
Elementの前は、アンダースコア（_）２つで区切るので、例えば、「card__card-image」と言った形になります。
Modifierとは何か？
Modifierとは、Blockまたは、Elementの変化した状態を表す要素です。
例えば、先ほどのボタンの上にカソールを合わせた際に色が変更する場合、Modifierで表現します。
Modifierの前はハイフン（-）２つで区切るので、「card__card-image–hover」といった形で書かれます。
BEMを使うメリット
BEMを使うメリットは、「メンテナンスが容易」という事です。
BEMは、細かくクラス名を指定するCSSの設計手法です。
なので、スタイルが適用される範囲がある程度絞られるため、CSSを修正した時に思わぬ所に影響が発生する事を防ぐ事が出来ます。
また、シンプルで大抵の人が知っているというのも大きなメリットです。
シンプルだと、意識せずにルールを守る事が出来ますよね？
BEMを使うデメリット
BEMは、クラス名を細かく管理する手法なので、クラス名が長くなってしまうというデメリットがあります。
ですが、個人的には、メンテナンス性や読みやすさが向上するなら、このデメリットを上回る大きなメリットがあると思っています。
まとめ
この記事では、CSSの設計手法としてBEMを例に見てきました。
「思ったよりシンプルだな？」と思ったかもしれません。
BEMはシンプルで分かりやすいので、ルールとして機能しやすいです。
どんなに素晴らしいルールでも、覚えずらかったらそもそも守られず意味ないですからね。
「分かりやすく」、「読みやすい」クラス名を付ける事は脱初心者の第一歩ですが、実際に手を動かしていく中で直ぐに習得出来ると思います。
コードを見たり書く時に是非とも意識して見てください！