プログラミング・エンジニア転職

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

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

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

コツ1:英語で書く

英語の写真素材|写真素材なら「写真AC」無料(フリー)ダウンロードOK

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

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

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

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

ソウ

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

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

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

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

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

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

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

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

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

コツ2:タグ名を入れる

ギフトタグの写真素材|写真素材なら「写真AC」無料(フリー)ダウンロードOK
  • header
  • nav
  • main
  • footer

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

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

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

こんなかんじですね。

コツ3:無理に表示を省略しない

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

ソウ

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

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

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

コツ4:子結合子(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」の方がスッキリして見えるかと思います。

コツ5:コメントを入れる

「ポイント」と書かれた画像

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

CSSのコードに関しては、

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

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

ソウ

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

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

アウターの写真素材|写真素材なら「写真AC」無料(フリー)ダウンロードOK

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

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

  • 「-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>

こんなかんじですね。

自分の命名規則をまとめました!

「まとめ」と書かれた画像

コードを書くのが自分だけという状況だと、けっこう適当にクラス名を決めがちです。

しかし、その場合でもある程度のルールに則らないと、作業の後半になるにつれて、訳が分からなくなりがちです。

将来の自分が苦しまないためにも、読みやすくてイメージしやすいクラス名をつけていきたいと思います。