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
一番良いCSSの設計手法とは 過去にまとめたCSS設計についての考えをまとめてみた。 今は、どういった設計をすべきだろうか。 ReactやVueを使う場面も増えていく環境で、どの設計手法が一番運用しやすいのか。 CSS設計手[…]
