【css命名規則】BEM使用時はキャメルケースを使い可読性を高めようという話【css設計】

BEM

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も取り入れられるため「-」や「_」が多くなります。

そのためキャメルケースを使うことで、可読性が向上します。

まとめ

キャメルケースを使う事のメリットが伝わりましたかでしょうか。

コードを書くにあたり分かりやすいコードを書くというのとても大切なことだと思います。

私自身も日々模索するばかりです。

タイトルとURLをコピーしました