もう迷わない！classの命名規則について

コーディング初心者がよく迷うと言われているclass名。

今回はclass名で悩んでいる方にもわかりやすく命名規則を解説します。

ぜひ最後まで見ていってください！

classの命名規則の主なポイント

class名を付ける時にはどの部分の何を指定しているclassなのかがわかるclass名にすることが大切です。

わかりづらいclass名にしてしまうと、修正する際、または他のコーダーが見た時に時間がかかってしまいます。

class名に正解はありませんが、命名規則に基づいて指定することで、効率よくメンテナンスしやすいコードになります。

一般的な共通命名規則

半角英数

日本語、半角カタカナ、全角英数字・記号は使用できません。

また、ローマ字を使用するのはNGです。

記号はハイフンまたはアンダースコア

「-(ハイフン)」または「_(アンダースコア)」以外を使用するとエラーの原因になってしまいます。

スペースは使用しない

全角・半角スペースを使用すると別のclassと認識されてしまうので使用しないようにしましょう。

アルファベットから開始する

数字や記号から始めると認識されません。

必ずアルファベットから開始するclass名に指定しましょう。

命名規則の種類

ケバブケース(ハイフン記法)

単語を「-(ハイフン)」で繋げる記法のことです。

串で刺したように見えることからケバブケースと呼ばれています。

class="service-wrapper"

キャメルケース(キャメル記法)

単語の区切りに大文字を使用する記法です。

単語を区切る大文字がラクダのこぶに見えることからキャメルケースと呼ばれています。

class="serviceWrapper"

スネークケース(アンダースコア記法)

単語を「_(アンダースコア)」で区切る記法のことです。

アンダースコアで単語を繋ぐ形が蛇に見えることからスネークケースと呼ばれています。

JavascriptやPHPではハイフンが使用できないため、アンダースコア記法はプログラマーに好まれています。

class="service_wrapper"

よく使用される命名規則

場所をclass名に付ける

まずは場所で指定すると簡単です。

例えばfooterの中にあるclass名はclass="footer"、またその中にあるclass名はclass="footer-nav"などです。

<footer class="footer">
  <nav class="footer-nav">
    <ul>
      <li>HOME</li>
      <li>ABOUT</li>
      <li>SERVICE</li>
    </ul>
  </nav>
</footer>

部品をclass名に付ける

部品名もよくclass名に使用されます。

例えば、ラベルはclass="label"や、ボタンはclass="button"などです。

<button class="button">お問い合わせはこちら</button>

機能でclass名を付ける

機能で名前を付けることもできます。

例えば記入欄であればclass="input"や、送信ボタンであればclass="submit-button"などです。

<input class="submit-button" type="submit" value="送信する" />

要素名を使用する

HTMLの要素からclass名を付与することもできます。

例えばol要素は「ordered list」の略なので、class="list"、li要素は「list item」の略なので、class="list-item"と命名するとわかりやすいです。

<ol class="price-list">
  <li class="price-list-item">2,500円</li>
  <li class="price-list-item">1,800円</li>
  <li class="price-list-item">1,6000円</li>
</ol>

要素を囲む

要素を囲む際に使えるclass名にclass="wrapper"、class="outer"、class="container"などがあります。

また、その中を囲みたい場合はclass="inner"やclass="content"などが使用できます。

<div class="service-wrapper">
  <div class="service-inner">
    <h1>タイトル</h1>
    <p>テキストが入ります</p>
  </div>
</div>

よく使うclass名一覧

範囲を分けるclass名

囲むもの	wrapper, container
外側	outer
内側	inner
箱	box
サイト	site
セクション	section, contents, block
サブコンテンツやサイドバー	sub-contents, side-bar, side

部品や要素に付けるclass名

ナビゲーション	nav, navigation, navi
タイトル	title
リスト	list
見出し	heading
項目	item
写真、画像	img, image, pic, picture
コピーライト	copyright
ロゴ	logo
情報	info, information
お知らせ	news, announce
詳細	detail
文章	text
サムネイル	thumb-nail
日付	date
時間	time
問い合わせ	contact
表	table
ボタン	btn, button
サービス	service
アクセス、交通情報	access
特徴	feature
料金、金額	price
スタッフ	staff
採用	recruit
おすすめ	recommend
スライド、スライドショー	slide, slider
動画	movie

形容するclass名

一番の	first, primary
二番目の	second, secondary
主要な、メインの	main
副次的な、サブの	sub
次の	next
前の	previous, before
一般的な	general
共通の	common

まとめ

今回は、class名の命名規則について紹介しました。

いかがでしたでしょうか？

命名規則に沿ってclass名を付与することで効率よくメンテナンスがしやすいコードを書くことができます。

別投稿では、HTML/CSSについての基本知識や、コーディングに役立つ知識についてご紹介していきますのでそちらもぜひチェックしてみてください！