BEMやFLOCSSを学んだ後、私のつけるクラス名は長くなってしまう傾向にあります。現状は私１人でコーディングしているため、今は自由にクラス名をつけています。最初の頃に比べると、クラス名の付け方も上手くなってきたような気がしますが、以前より、明らかに長くなってしまいます。例えば、下記のように名前をつけてしまい、どんどんクラス名が長くなってしまいます。
<div class=”p-page-case__item”>
<div class=”p-page-case__item-top”>
〜
</div>
<div class=”p-page-case__item-bottom”>
<div class=”p-page-case__item-bottom-title”>
<h3 class=”p-page-case__item-bottom-title-course”>
研修コース：<span class=”p-page-case__item-bottom-title-name”>ビジネス留学プログラム</span></h3>
</div>
</div>
</div>
p-page-case__item-bottom-titleの中にあるからp-page-case__item-bottom-title-courseなど、細かく名づけてしまっています。良いことなのか、悪いことなのかもわからないので、少し調べてみました。BEMではElementのネストによる命名方法は推奨していないようです。p-page-case__item-bottomの下のクラスの全てにp-page-case__item-bottomから始まるクラス名をつける必要はないとのことでした。
理由はクラスを途中で移動したり、追加をしたりするケースがあり、あまり、長い名前は可読性も悪くなるとのことでした。上記の場合、もし、p-page-case__itemの中にタイトルのようなテキストがなければ、p-page-case__item-bottom-titleでなく、p-page-case__item-titleの方がベターという解釈です。あくまでも、推奨であって、プロジェクト内のルールがあれば、それに従うといういつもの注釈はついております。
習うより慣れろで、数をこなしていきたいと思います。
