なぜBEMはアンダースコア__、またはハイフン–と2個必要なのか

BEMとは何か

の詳しい話はせず、簡単にだけ説明します。詳しくはこちらを確認ください。

https://en.bem.info/

BEMを利用する上で、BEMは気持ち悪いと感じる理由の１つ

「なぜBEMはアンダースコア（アンダーバー）やハイフンを2つ連続でつける必要があるのか」

それに対し、別の少しカスタマイズしたBEMルールを適応して運用する方法の紹介です。

BEMの記法

BEMとはB（Block）、E（Element）、M（Modifier）の略字になります。

Block

ElementとModifierの起点となる要素。

コンポーネント自体を表す物。

Element

Blockの各要素。

Block__Elementのルールで記述します。

「子要素なのでアンダーの線にする」で覚えると楽です。

Modifier

Block、またはElementの状態変化を表す要素。

例えば、disabledなど要素の状態が非活性を表したい時などに利用できます。

Block__Element–Modifierのルールで記述します。

「要素は同じで状態が違うだけ。同級生みたいなものなので横の線で表現する」で覚えると楽です。

Block__Element–Modifierである理由

ふと思うのは

「Block_Element-modifier」で良いのでは無いか？

と思ったところ。

そもそもこの記法の元となるものですが、単語がケバブケース（kebab-case）で記載することが前提となっています。

そのため「block-item__element-item–modifier」となります。

これに対してアンダースコア、またはハイフンを1つにすると

「block-item_element-item-modifier」

一気に破綻します。

ちなみにスネークケースも用いても同じです。

これが理由の１つなのかなと感じます。

BEMのカスタムルール

個人的には以下2つのルールが気になるので、カスタムルールをつけると運用しやすく、かつBEMに対しての嫌悪感もなくなるかなと感じます。

• 単語はキャメルケース
• アンダースコア、ハイフンは1つ

Before「block-item__element-item–modifier」

Aftter 「blockItem_elementItem-modifier」

これによってメリットが多くなり、運用しやすくなります

• クラス名が短くなる
• 可読性が高まる：ハイフンが多い
• 人によって感じる気持ち悪さがなくなる：人による

BEM自体は大変良い設計手法なので、カスタムして運用していくと更に効率的運用ができるかと思います。

個人的な気持ちも含んでいるので、私はこう思うなどあればご意見くださいmm