コラム：class名とid名はどうやってつければいい？

CSSを定義する際に便利なのがclassとid。毎回固有のclass名やid名を考えるのは最初は戸惑うものです。

「何かわかりやすい命名規則はないか…」
「自分でつけているこの名前って問題ないのか…」
「毎回名前を考えるのが時間がかかる…」

といった問題は意外と大きいものです。
何が正解というのはないですがある程度自分の中でルール化しておくと修正や更新をする際にラクだし、他の人が読む時もわかりやすくて時間のロスになります。

大きいエリアや広範囲のものに使える名前

メインのコンテンツやヘッダー、サイドバー、フッターなど、わりと大きめのエリアに使うときに使うケースが多い名前です。

header, head, heading

名前の通り、要素の上部分やヘッダー自体に使ったりします。html5になってからはheaderタグが加わったので前程使うケースは少なくなってきました。

使用例：
<div id=”header”></div>
<div class=”head”></div>

要素の上部やヘッダー付近に使えるもの一覧

main, mainArea, contents, mainContents

こちらはそのページの中で主役となるエリアや中心となるコンテンツなんかによく使います。
他にもcenterArea, centerContents, mainBox, centerBlockなどなど。contentsが長いときはcontとか略したりもします。

使用例：
<div id=”main”></div>
<div class=”contents”></div>

ページの中で主役となるエリアや中心となるコンテンツに使えるもの一覧

side, sidebar, sideOne, sideTwo

サイドバーやサイドに置くコンテンツ用に使います。html5のasideタグがでてきてこちらもそんなに使わなくなりました。
左側のサイドバーという意味で単に「left」とやったりするとcssを眺めた時に「leftってどこのleftだろう？」とごっちゃになることが多いので、その場合はsideLeftなどにしたり、後々サイドバーを入れ替えることが考えられるときはsideOneとかsideTwoとかにすることをお勧めします。
※位置などは変わることが多いのでそもそもleftやrightというのはあまりおすすめではない

使用例：
<div id=”side”></div>
<div class=”sidebar”></div>

サイドバーやサイドに置くコンテンツ用に使えるもの一覧

footer, foot, bottom

要素の下部や下エリアに使うときに。ページのフッター部分だけではなく何かのボックス要素のボトム部分とかでも使えるので割と使ったりします。

使用例：
<div id=”footer”></div>
<div class=”bottom”></div>

要素の下部や下エリアコンテンツ用に使えるもの一覧

単純な囲いや限定的な要素に使える名前

意味はないけどCSSをかけたいのでclass名をつける場合やfloatする要素で高さを維持したいので限定的にclassをつけるケースなど。意外とこういうのが多くて命名にこまるんですよね。。。

wrap, wrapper, inner

単純になんか囲いたいときなど。場所と組み合わせたりしてmainWrap, mainInnerとかheadWrapper, sideWrap, footerInnerなんかにしたりします。
結構wrapなんかは登場することがおおくて、例えばメインコンテンツを2カラムにしている場合、HTML上は2カラムにしているタグだけでいいのですが、デザイン上どうしてもhtmlを追加して2カラムのタグを囲うタグを作るケースが割りとあります。そういうときにはid=”wrap”とかclass=”wrapper”なんか使うことが多いです。

使用例：

<div id=”wrap”>
<div class=”main”>メインコンテンツエリア</div>
<div class=”side”>サイドバーエリア</div>
</div>

囲う系の名前使えるもの一覧

summary, breadcrumb, detail

限定的に「ここだけ」みたいな感じで使える名前です。上記以外の部分など。個人的にはよく使いますね。
下の一覧と今までのエリアごとの区分けで出てきた名前の組み合わせでほとんどいけると思います。

使用例：
<div class=”summary”></div>
<div class=”breadcrumb”></div>

限定的なエリアやその他の名前一覧

おまけ：アンダーバーかキャメルケースか

class名やid名を書くときにどっちにしようかと一度は考えたのではないでしょうか？

どっちが優れているというのはなくプロジェクト毎にルール化されていることが多いです。あとは個人的に好きな方を使う…という感じ。
ちなみに僕は最初アンダーバーで書いていましたが文字が長くなるのが気になったので今はキャメルケースで書くことが多いです。メリットは文字数が少なくなることですが、しばらくして慣れてきた頃感じたデメリットはCSS以外のプログラミン言語や単純にファイル名などを考慮したときアンダーバーの方が汎用性があるかも…と思いました。今は慣れてしまったので特に不自由はしていませんが、まあ人それぞれですね。

※追記
現在（2017/3月）はキャメルケースではなくアンダースコア（アンダーバー）で統一しています。

※追記
現在（2018/6月）はアンダースコア（アンダーバー）からハイフンに変更しました。Twitter BootstrapやFoundation等のCSSフレームワークで採用されているためです。