個人メモです。
BEMの命名ルールでは塊であるブロックは__、小変更を加えるモディファイヤーは--で表す。
連続した単語は-でつなげる。（例： quality-control)
この方法では、display: flexなどで入れ子構造の中に更に入れ子がある場合に、ブロック名が複数続いて名前が長くなってしまう。
長い名前の例
<div class="p-review__main__body__stars">
p-review という親要素の中に、mainがあり、その中に、bodyがあり、その中のstarsに対してクラスを適用している。
このstarsの中に更に要素があれば、名前はどんどん長くなっていく、、
長っ、、、
<div class="p-review__main__body__stars_rate">
対処法
ブロック__が３個以上続いたら、新しい名前に変更する。
変更前
<div class="p-review__main__body__stars">
↓ 修正
修正後
<div class="p-review-stars">
ハイフンで繋ぎ、新しいまとまりにしてしまう。
中にブロックが続く場合は、規則通り__で繋ぐ。
<div class="p-review-stars__rate">
記述がシンプルになり、見易くなった。