FLOCSSなどBEMの命名ルールに従って名前を付けていく場合は、要素の中の要素のように深い階層にある要素につける名前がとても長くなってしまうことがあります。
そんなときは、長いクラス名をそのまま使うのではなく、親要素の名前は残して、わかりやすい新たな名前をつけるできです。
ここではその方法を実例で解説しています。
BEMの命名ルールの基本
初めにBEMの命名ルールをサラッとおさらいしておきます。
１つの機能を持った塊であるブロック（モジュール）は「__（アンダーバー２つ）」でつなぎます。（例： p-review__wrapper)
色やフォントサイズを変えるといった小変更（モデファイヤー）は「–（ハイフン２つ）」でつなぎます。（例： p-review__wrapper–red)
なお、単に連続した単語どうしは「-（ハイフン１つ）」でつなぎます。（例： quality-control)
そして、ある要素の中に更に要素がある場合は、その要素を特定するために「__（アンダーバー２つ）」をつないでいきます。（例： p-review__wrapper__stars)
この方法では、display: flexなどで入れ子構造の中に更に入れ子がある場合に、ブロック名が複数続いて名前が長くなってしまいます。
長い名前の例
例えば、p-revirewという要素の中の、mainとなるブロックの中の、bodyというブロックの中に、starsというクラスを作成したい場合は以下のようになります。
<div class="p-review__main__body__stars">このstarsの中に更に要素があれば、名前はどんどん長くなっていきます。
<div class="p-review__main__body__stars_rate">これでは毎回記述するのも、コードでデバッグするときも大変です。
対処法
名前の変更方法
「ブロック__が３個以上続いたら、新しい名前に変更する」というルールにすると記述がシンプルになります。
例えば「p-review__main__body__stars」であれば、「__main」以降を消して、最後の「stars」の部分を、連続した単語であることを表す「-（ハイフン１つ）」でつなぎます。
こうすることで、他の要素とも被らなくなります。
実例
<div class="p-review__main__body__stars">↓ 変更後
<div class="p-review-stars">ブロックやモデファイヤーが続く場合
指定したブロックの中に更にブロックやモデファイヤーが続く場合は、規則通り__で繋ぎます。
実例
<div class="p-review__main__body__stars__rates--red">↓ 変更後
<div class="p-review-stars__rates--red">記述がかなりシンプルになり、見易くなります。
