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

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

文字の区切りに、ハイフンを使う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

ナビゲーション

• ナビゲーション･･･navi, nav, navigation, menu
• グローバルナビゲーション･･･gnavi, gnav, global-nav
• パンくずナビゲーション･･･pankuzu, topicpath, breadcrumbs
• その他のナビゲーション･･･sub-menu, sub-navi, list-menu, footer-navi

見出しや段落

• 見出し･･･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