基礎19. ID名、Class名の付け方と記法

1 ID名、Class名の付け方の法則と種類
2 制作会社で見られるセレクタ名の付け方
3 まとめ

ID名、Class名の付け方の法則と種類

ID、Class名の付け方には法則があり、半角英数、-（ハイフン）、_（アンダースコア）の組み合わせで名前をつけます。
どんな名称でも使用できますが、どのような設定なのか、内容が判別しやすい名前にするのがよいでしょう。
大文字と小文字どちらでも利用できますが、基本は小文字で統一します。
プログラムでは、大文字、小文字は区別されるため、CSSでも大文字、小文字を使い分ける習慣をつけておくとよいと思います。
他にも、セレクタ名の先頭に数字を使わないようにしましょう。
JavaScriptなどプログラムは、変数名、関数名の先頭に数字を使うとエラーになるからです。
CSSでも、そのルールに慣れておくとプログラムを学習する時に役立ちます。
使用してはいけない記号は、ファイル名、フォルダ名と同じです。
「初級4. ファイル名、フォルダ名のルール」を確認してみてください。
以下は、セレクタ名の記法の種類です。

ハイフン記法（ケバブケース）

文字の区切りに、ハイフンを使うCSSのスタンダードな記法です。
ハイフンが串のように見えることから、ケバブケースとも呼ばれます。
プログラムでは使用できない記法のため、プログラマーの方は、後述するアンダースコア記法やキャメル記法を好む傾向があります。


#sub-menu{ }
.item-list{ }

アンダースコア記法（スネークケース）

文字の区切りにアンダースコアを使うCSSのスタンダードな記法です。
アンダースコアで区切った形が、へびのように見えることから、スネークケースとも呼ばれます。
JavaScriptやPHPなどのプログラムは、ハイフンを使うとエラーになるため、プログラマー寄りの方が好む記法です。


#sub_menu{ }
.item_list{ }

キャメル記法（キャメルケース）

文字の区切りに大文字を使うCSSの記法です。
プログラマー寄りの方が好む記法です。
区切りの大文字がラクダのコブにみえるところから名付けられました。


#subMenu{ }
.itemList{ }

制作会社で見られるセレクタ名の付け方

ここでは制作会社でよく使われているセレクタ名の付け方の一例を紹介をします。
ハイフン記法で紹介していますが、他の記法に変更しても問題ありません。

ブロック、範囲

広い範囲を囲むボックス･･･wrapper, wrap, container, page, page-body
ヘッダー･･･header, header-area
フッター･･･footer, footer-area
メインコンテンツ･･･main, main-contents, contents
コンテンツ、章･･･content, contents, container, layout, sec, section, block
サブコンテンツやサイドバー･･･sub, sub-content, side-bar

見出しや段落

見出し･･･heading, midashi
段落、セクション･･･section, sec, entry-body
ロゴ･･･logo
キービジュアルやメインビジュアル･･･key-visual, main-visual
画像や写真･･･image, photo

具体的な範囲

エントリー記事･･･entry
コメント･･･comment, comments
案内文･･･lead
概要･･･outline
要約･･･summary, abstract
説明･･･description
話題、新着、ニュース･･･topic, topics, news
お知らせ･･･info, infomation
注目記事･･･spotlight
ピックアップ･･･pickup
検索･･･search
プロフィール･･･profile
コピーライト･･･copyright

このようにID名、Class名は、名前で内容が分かるようになっています。
英語が苦手な方は「Google翻訳」などの翻訳サイトを使って名前を決めるのも良いと思います。
また英語で表現が難しい場合は、ローマ字で考えるのもよいでしょう。
見出しやコンテンツなど、見た目によって区別したいなら、名前の後ろに-a, -bや通し番号などをつけるなどの工夫してみましょう。
heading-a, heding-b, heading01, heading02
sec-a, sec-b, sec01, sec02

Google翻訳

まとめ

ID名、Class名は、半角英数、ハイフン、アンダースコアを利用する。
ID名、Class名は、どのような設定なのか内容が判別しやすい名前にする。
「ハイフン記法」は、区切りにハイフンを使った記法。
「アンダースコア記法」は、区切りにアンダースコアを使った記法。
「キャメル記法」は、区切りの文字を大文字にした記法。