htmlコーダーの多くの方はクラス名を付ける際にケバブケースを使用する方が多いのではないかと思います。
私自身もケバブケースを採用していました。
ケバブケースとは「header-title」のような「-」(ハイフン)を使った命名規則です。
ですが、css設計をするにあたりキャメルケースの方が有用なのではと思い、キャメルケースを採用するようになりました。
キャメルケースとは「headetTitle」のように単語の頭文字を大文字にする命名規則です。
最初の単語に関しては大文字にしません。
キャメルケースの有用性を多くの人に伝えたいため、自身の備忘録として書いていこうと思います。
※BEM使用時とタイトルで謳っていますが、BEM以外のFLOCSSやSMACSSやMCSSや通常時でもキャメルケースを使用した方がいいと考えております。
特にMindBEMding採用時には必須とも思います。
キャメルケースを使用することのメリット
・BEM採用時に可読性の向上に繋がる
・接頭辞と混同し辛くなる
・記述量が少なくなる
上記全てをまとめると「可読性が向上する」ということになりますね。
BEM採用時に可読性の向上に繋がる
BEM採用時にケバブケースで記述するとこうなります。
「header-list__header-item」
キャメルケースで記述するとこのように書くことが出来ます。
「headerList_headerItem」
「冗長だ」と呼ばれるBEM(MindBEMding)。この記述方式で、ケバブケースを使用することで冗長性はさらに増します。
キャメルケースであればElement、Modifireの「–」と「__」を一つにすることもできます。
またMindBEMdingは「–」や「__」を使用する記述方式なため「-」や「_」を使うことで可読性の低下は否めません。
接頭辞と混同し辛くなる
接頭辞というのは「l-example」「u-example」などの「l-○○」です。
「プレフィックス」や「プレフィクス」とも呼ばれますね。
css設計ではMCSSやSMACSS、FLOCSSなどでよく使われますね。
またFLOCSSではMindBEMdingも取り入れられるため「-」や「_」が多くなります。
そのためキャメルケースを使うことで、可読性が向上します。
まとめ
キャメルケースを使う事のメリットが伝わりましたかでしょうか。
コードを書くにあたり分かりやすいコードを書くというのとても大切なことだと思います。
私自身も日々模索するばかりです。