2019.05.03htmlコーダーの多くの方はクラス名を付ける際にケバブケースを使用する方が多いのではないかと思います。私自身もケバブケースを採用していました。ケバブケースとは「header-title」のような「-」(ハイフン)を使った命名規則です。css設計をするにあたりキャメルケースの方が有用なのではと思い、キャメルケースを採用するようになりました。キャメルケースとは「headetTitle」のように単語の頭文字を大文字にする命名規則です。最初の単語に関しては大文字にしません。キャメルケースの有用性を多くの人に伝えたいため、自身の備忘録として書いていこうと思います。※BEM使用時とタイトルで謳っていますが、BEM以外のFLOCSSやSMACSSやMCSSや通常時でもキャメルケースを使用した方がいいと考えております。MindBEMding採用時には必須とも思います。目次キャメルケースを使用することのメリットBEM採用時に可読性の向上に繋がる接頭辞と混同し辛くなるまとめスポンサーリンクキャメルケースを使用することのメリット・BEM採用時に可読性の向上に繋がる・接頭辞と混同し辛くなる・記述量が少なくなる上記全てをまとめると「可読性が向上する」ということになりますね。BEM採用時に可読性の向上に繋がるBEM採用時にケバブケースで記述するとこうなります。「header-list__header-item」キャメルケースで記述するとこのように書くことが出来ます。「冗長だ」と呼ばれるBEM(MindBEMding)。この記述方式で、ケバブケースを使用することで冗長性はさらに増します。キャメルケースであればElement、Modifireの「–」と「__」を一つにすることもできます。MindBEMdingは「–」や「__」を使用する記述方式なため「-」や「_」を使うことで可読性の低下は否めません。接頭辞と混同し辛くなる接頭辞というのは「l-example」「u-example」などの「l-○○」です。「プレフィックス」や「プレフィクス」とも呼ばれますね。css設計ではMCSSやSMACSS、FLOCSSなどでよく使われますね。FLOCSSではMindBEMdingも取り入れられるため「-」や「_」が多くなります。そのためキャメルケースを使うことで、可読性が向上します。まとめキャメルケースを使う事のメリットが伝わりましたかでしょうか。コードを書くにあたり分かりやすいコードを書くというのとても大切なことだと思います。私自身も日々模索するばかりです。めいなぎちゃんねる関連記事cocoon【cocoon】ヘッダー下にオススメ記事一覧のスライドショーを表示させる方法【ワードプレス】cocoon【cocoon】新着記事一覧を2列表示させる方法【ワードプレス】cocoon【cocoon】カルーセル(スライダー)をおしゃれにカスタマイズする方法【コピぺOK】cocoon【cocoon】下部に表示される黒いアンダーバー(メニューバー)を消す方法ガジェットウェブ制作のための外付けHDDを買ってみた。SWE01」をレビュー2019.07.162019.09.28カテゴリーBEMcocoonSassSEOウェブ制作ガジェットハミングバードブログワードプレス便利グッズタイトルとURLをコピーしました。