【HTML設計思想 / クラス命名】最高に管理が楽なわたし的BEM #CSS

はじめに

爆速コーディングの記事で HTML の設計を楽にするため・HTML をブロック管理する感覚を掴むためにに BEM を取り入れることをおすすめしました。
Block, Element, Modifier という設計概念を持つ BEM の中でも、さらに様々な BEM 命名規則が存在するようですが（これらを今回は「BEM 系」とします。）、私が上記記事で BEM と指したのは BEM の中でもMindBEMdingというもので、現在「BEM 系」の中で最もポピュラーなものです。「BEM」と呼んだら多くはMindBEMdingを指します。

しかし私が実際に HTML／CSS 設計に取り入れているのはMindBEMdingではありません。（オススメしておいて・・・）

一貫性をもって管理しやすいMindBEMdingにもデメリットと思われる点があり、そこを解消したのが現在私が取り入れている命名規則です。
Block, Element, Modifier の設計思想には変わりがありません。命名規則だけが変わります。

BEM設計はブロック（モジュール）管理ができる考え方として良い設計だと思っていたため、シンプルで管理しやすい = 楽な命名規則を求め、BEMをもとにした命名規則は色々試しました。
様々なプロジェクトで試してPDCAを回して、やっと現在の命名規則に落ち着きました。
自信を持っておすすめできる命名規則ですので、命名に悩む方にはぜひお試し頂きたいです！

BEM の設計概念をある程度理解した上であれば取り入れやすい命名規則なので、ぜひ本記事を参考にして頂けたら幸いです。

広まれ〜〜！

まとめへショートカット

わたし的BEM命名規則まとめ

ちなみに、私の命名規則ってこれと同じじゃん！と思える既存の命名規則見つけて喜んでいたのですが、本記事を書くにあたって、よく説明を確認したらちょっと違いました。
一緒だと思っていたので、本記事はもともとそちらの紹介にするつもりだったのですが。。
仕方がないので、「わたし的BEM」に改めました。

ここまで出来たら良いよね・・・でもめっちゃクラス名長くなるなあっていう Chainable BEM Modifiers。
Chainable BEM

ああ、私のクラス命名もChainable BEMと呼びたかった。

MindBEMding の復習

BEM の基礎を復習したい方へ
前回 BEM の概要をご説明しました！

クラス命名を BEM に頼ってみる

MindBEMdingは長いクラス名になってしまうため、コードが読みづらくなるのがデメリットだと言われています。

わたし的 BEM の命名規則

Block, Element はMindBEMdingと異なる点はありません。全てが同じです！
Modifire だけ異なります。

MindBEMdingとコードを比べながらご説明出来ればと思います。

たとえばこのようなボタンのパターンがあった場合

BEM の設計概念上では、ボタンという要素を Block とし、そのボタンのバリエーション・パターンとして存在する「青背景」を Modifier とします。

この BEM 設計の上、MindBEMdingだと以下の様にクラス命名・スタイル管理ができます。

MindBEMding

index.html

<button class="button">標準ボタン</button>
<button class="button button--blue">青ボタン</button>

style.scss

.button {
  width: 100px;
  padding-top: 8px;
  padding-bottom: 8px;
  border: none;
  background-color: grey;
  color: #fff;
}

.button--blue {
  background-color: blue;
}

クラス名に着目して、「button」も「blue」も文字数が少ないため今回は気になりませんが
これが「main-visual」と「registerer」だったら・・・
（例えで作りましたが、会員登録者にのみ見えるメインビジュアルを実装したい場合にありそうなクラス名です。）

<div class="main-visual main-visual--registerer">

となりますし、ここに Element まであると

<div class="main-visual__text main-visual__text--registerer">

こんなにタグが長くなっちゃうんです！
こんなのがたくさんあったら、コードが冗長に見えますよね。そのため嫌煙されることがあるのです。

わたし的 BEM はこの冗長化を解決しています。
先程のボタンは以下の様にクラス命名・スタイル管理ができます。

わたし的 BEM

index.html

<button class="button">標準ボタン</button>
<button class="button --blue">青ボタン</button>

style.scss

.button {
  width: 100px;
  padding-top: 8px;
  padding-bottom: 8px;
  border: none;
  background-color: grey;
  color: #fff;

  &.--blue {
    background-color: blue;
  }
}

// アンチパターン: 一見Modifierは汎用的に使えそうなクラスに見えるが、`.button--blue`の設計を保つべき。
// よって汎用的なクラスにはせず、あえて`.button`のサブクラスとして置かれた場合のみにスタイルが聞くようにセレクタを指定する。
// .--blue {
//  background-color: blue;
// }

Modifier が.block--modifireではなく、.--modifireのみになってすっきりしました。
Element がある場合も.block__element--modifierが.modifierになります。

またコードにはアンチパターンも記載しています。
MindBEMdingから命名規則が変わったことで汎用的な.--blueクラスとしてもスタイル指定が出来ますが、あえて「ボタンの青背景パターン」としてしか使えないようにセレクタを限定することが BEM 設計を保つために重要なポイントです。

これで先程は冗長だったコードも短く出来ます！

index.html

<div class="main-visual main-visual--registerer"></div>
<p class="main-visual__text main-visual__text--registerer"></p>

=>

<div class="main-visual --registerer"></div>
<p class="main-visual__text --registerer"></p>

文字数が減ったことはもちろんですが、ぱっとタグを見たときも見やすくなったと思います。
読みやすさ = 管理しやすさ・触りやすさです。とっても大事！
MindBEMdingから比べても Modifier のみの違いなので、地味な変化ではありますがこれがファイル全体への変更となると大きく変わってきます。

まとめ

最後にわたし的BEM命名規則のまとめです。

Blockクラスは.block（MindBEMdingと同じ）
Elementクラスは.block__elementであり、親Blockの中でのみ存在できる。（MindBEMdingと同じ）
Modifireクラスは.--modifier
セレクタとしては、.--modifierに直接スタイルを付けることはしない。汎用的なクラスとはせず、Blockクラスまたは、Elementクラスと共に用いられたときのみにスタイルが効くように指定する。
Block, Element, Modifier それぞれ複数単語から成るときにはケバブケース（全て小文字&単語をハイフンで繋ぐ）を用いる。（MindBEMdingと同じ）

ちなみに、一時期.--modifierを.-modifierにしていたこともありました。
ハイフンを1つにしていたんですが、そうするとファイル内でModifier名を検索する際に-modifierと検索して、BlockやElementクラス内でハイフンで繋いでいた同単語にも引っかかってしまいます。
このようにModifire以外も検索に引っかかる可能性が出てしまうため、現在は.--modifierと、ハイフンを2連続にしています。
検索性も大事ということ！