「どこのコードか分からない…」を避けるためにclass名の命名規則を整理しました！

「どんなclass名を付けたらいいか毎回悩む…」
「class名を見てもどの部分か分からない…」

こんな事が多々ありましたが、最近、ようやくコツが見えてきたので、自分なりのポイントを解説します。

コツ１：英語で書く
コツ２：タグ名を入れる
コツ３：無理に表示を省略しない
コツ４：子結合子(E>F)で表示するのはアリ
コツ５：コメントを入れる
コツ６：「-outer」や「-inner」の使い方を決めておく
自分の命名規則をまとめました！

コツ１：英語で書く

基本的な事ですが、ときどきサボりそうになりますね。

/* 悪い例 */
.chuo{
　…
}

/* 良い例 */
.center{
　…
}

今はGoogle翻訳ですぐに翻訳できるので、英語表記はサボらないように意識しています。

ソウ

ちなみにGoogleで「訳」と検索すると一発でGoogle翻訳が表示されます

ただし、場合によっては、敢えて日本語で書いた方が分かりやすい場合もあります。

最近触れた事例でいうと、「柚子」に関するコードを書きましたが、

/* 悪い例 */
.citron{
　…
}

/* 良い例 */
.yuzu{
　…
}

こんなふうに、「柚子」の場合は、英語の「citron」よりも「yuzu」の方が直感的に理解できるかと思います。

ですので、何でもかんでも、思考停止して英語に訳すというよりも、

基本的には英語で表記しつつ、「日本語の方が直感的に理解しやすいかも？」という視点も忘れない

これくらいの感覚でいると丁度いいかんじになりました。

コツ２：タグ名を入れる

header
nav
main
footer

このあたりの「直感的に理解できるHTMLタグ」をクラス名に入れるのは有効です。

具体的なイメージとしては、

    <header>
      <div class="header-inner">
        <div class="header-left">
          …
        </div>
        <div class="header-right">
          …
        </div>
      </div>
    </header>

こんなかんじですね。

コツ３：無理に表示を省略しない

文字数の多い単語だとやりがちですが、無理に略式表示をすると、コードを書いて数日後には訳が分からなくなります。

ソウ

例えば「container」という単語を「con」みたいに訳す場合ですね

とはいえ、クラス名の文字数が多いと、それはそれで読むのに一苦労かと。

なので、結局は「将来の自分や他人が直感的に理解できるか」って視点が大事かと。

コツ４：子結合子(E>F)で表示するのはアリ

liタグでよく使うのですが、敢えてクラス名を付けずに「.〇〇 >li」と書くと読みやすくなります。

<ul class="product-a">
  <li class="product-a-li"></li>
  <li class="product-a-li"></li>
  <li class="product-a-li"></li>
</ul>

<ul class="product-b">
  <li></li>
  <li></li>
  <li></li>
</ul>

/* 良い例 */
.product-a{
　…
}

.product-a-list{
　…
}


/*悪い例 */
.product-a{
　…
}
.product-a >li{
　…
}

こんなふうに、「product-b」の方がスッキリして見えるかと思います。

コツ５：コメントを入れる

命名規則とは少しズレますが、適度にコメントが入っていると、コードの可読性が高まります。

CSSのコードに関しては、

「ヘッダー」や「フッター」などの大きなセクションの前後
javascriptに関連する部分

このあたりは積極的にコメントを付けるのが良いかと思います。

ソウ

コメントは頻繁に使うので、ショートカットキーの暗記は必須

コツ６：「-outer」や「-inner」の使い方を決めておく

特定の要素に対して、一回り大きな(小さな)要素を追加したいときは多いかと思います。

そんなときによく使うのが、

「-wrapper」
「-outer」
「inner」
「-content」

こんな表現かと。

これらを記載するときに統一的なルールを決めておくと、時短にもなるし、キレイなコードにもなります。

ちなみに僕の場合は、

「-wrapper」→「-outer」→本体→「-inner」

こんな構造になるように意識しています。

例えば、「お問い合わせ(contact)」に関する部分のコードで見ると、

<div class="contact-wrapper">
  <div class="contact-outer">
    <div class="contact">
      <div class="contact-inner">
        …
      </div>
    </div>
  </div>
</div>

こんなかんじですね。