キャメルケース、スネークケース、ケバブケースとは?
CSSのクラス名やプログラミングの変数名をつけるときのルールです。
それぞれの書き方を紹介します。
キャメルケース
単語をつなげたとき、文字の1文字目を大文字にする書き方です。
キャメルケースには2種類あります。
「ローワーキャメルケース」と「アッパーキャメルケース（パスカルケース）」です。
ローワーキャメルケース
単語をつなげたとき、一番先頭の文字は小文字、それ以降の単語の1文字目は大文字にする方法です。
たとえば「news」と「area」という2つの単語を組み合わせる場合、
newsの先頭 “n” → “N”
areaの先頭 “a” → “A”
にします。
例えば・・・
- 「newsArea」
- 「topContentsBox」
- 「campaignEntryButton」
アッパーキャメルケース（パスカルケース）
単語をつなげたとき、全ての単語の先頭を大文字にするにする方法です。
別名パスカルケースとも呼びます。
ローワーキャメルケースとの違いは一番先頭の文字が大文字であることです。
例えば・・・
- 「NewsArea」
- 「TopContentsBox」
- 「CampaignEntryButton」
小文字のなかに大文字が入ってデコボコしているのがラクダ（camel）のように見えることからキャメルケースと呼ばれています。
スネークケース
単語と単語をアンダースコア（アンダーバー）でつなぐ書き方です。
例えば・・・
- 「news_area」
- 「top_contents_box」
- 「campaign_entry_button」
ヘビの姿に似ていることからスネークケースと呼ばれています。
ケバブケース
単語と単語をハイフンでつなぐ書き方です。
例えば・・・
- 「news-area」
- 「top-contents-box」
- 「campaign_-entry-button」
ケバブの肉を串刺しにしている様子に似ていることからケバブケースと呼ばれています。
おまけ：アッパーケース
そのほかにアッパーケースと呼ばれるものもあります。
全て大文字かつ、単語と単語をアンダーバーでつなぐ書き方です。
例えば・・・
- 「NEWS_AREA」
- 「TOP-CONTENTS-BOX」
- 「CAMPAIGN_ENTRY_BUTTON」