id、classの識別

・idをつける部分は構造を決定するdiv要素のみ。
つまり『idをつけているものは構造（レイアウト）を表すもの』というふうに区別するようにしています。

例えば、liタグで記述したメニュー部分にidをつけようと思います。

サイバーガーデンの益子さんが、ソースがクリーンで好ましいと言っている例。

私の例。

前者のほうがソースがクリーンだしいいなと思った時期もありましたが、冗長性の理由があって今は後者を選択。

できるだけclassは使用しないようにしていますが、一部のみ色や文字の大きさを変更する場合はページにひとつだけの要素であってもclassを使用するようにしています。

一般論的には私の考えは間違っているのかもしれません。
idは唯一無二のもの、classは詳細に分類したものに指定するというのが本来の考え方です。
だから、以下のshunさんのコラム
classとidの使い分けについて考えてみる | Blog hamashun.com

のようにheaderがidというのもまた違うような・・・と悩んでしまうのも尤もな意見です。
ただし、idがCSSの優先度が一番強いことを考えると、唯一無二な要素につけるもありですが、ブロック要素（グループ化したもの）につけるほうが、コーディングもしやすいし、メンテナンスもしやすいような気がします、経験上。

idの命名規則

一番最初に『idをつけているものは構造（レイアウト）を表すもの』と言いましたが、こうなると、idを使用するところは非常に狭められてきます。

・#top
テンプレート自体を囲む要素です。今結構悩んでいるのですが、「#top」をつけることが多くなってきています。
これは、「トップへ戻る」アンカーの戻り位置も併用しているからです。
一般的には戻り先はページ内リンクのname属性を使うことが多いと思いますが、それだと空要素になってしまうので、個人的には気持ち悪い。
「トップへ戻る」アンカーがない場合は、「wrapper」とかつけることが多いです。以前は「all」とかも使っていました。

・#header
ヘッダー部分です。主にサイトロゴなどを表示します。

・#menu
文字通りメニュー部分です。メニュー部分はひとつではない場合もあります。
その場合は、「#sideMenu」「#headMenu」のように頭に指定する場所がわかるような名前を書くか、「#mainMenu」「#subMenu」と重要度を表す名前をつけるかのどちらかです。
メニューはデザインによっては、#headerあるいは#footerの中に入れる場合もあります。

・#topicPath
パンくずリストです。これはサイトによってつける場合とつけない場合があります。「#topic」にする場合も。

・#contents
コンテンツ部分です。本文を書くところなど用途は多様です。これも、メニュー同様ひとつではない場合は「#sideContents」「#headContents」「#mainContents」などと命名します。

・#footer
フッター部分です。著作権表示などを表示します。

気づいた方もいらっしゃるかもしれませんが、「sideMenu」など単語がふたつ以上くっついた場合は、最初の単語を小文字、次からの単語を大文字で始めるようにしています。
これは視認性が上がるためです。あと、他のプログラムに多少慣れてしまったため、そういうふうに記述しないと気持ち悪い感があります。

視認性という点では、アンダーバーも結構多用しがちなのですが、古いブラウザでは認識しないということなのであまり使用しないように心がけています。

classの命名規則

これは、要所要所で異なりますね。一概には言えません。
でも、一貫として言えることは、「名前を見てだいたい何を指定しているのか想像がつく名前をつける」ということです。

例えば、強調するstrongタグで囲んである文字を赤にしようと思って、「class="textColorRed"」にするのはよくないと言われがちですが、私はそれもありだと思っています。
そういう風に全てを統一してしまえば、仮に緑色にしようと思ったら、HTMLファイルを全置換かけて「class="textColorGreen"」にすればよいだけの話です。
一分くらいで終わる作業内容です。それほど作業効率が下がるとは思えません。

一応補足しますが、strongタグで囲んだテキストの色を全て赤にするというのなら、CSSのほうで「strong{color:red;}」にすべきだと思います。
「赤い色」に意味があるなら、そういう名前にしてもよいのでは？という話です。

画像ファイル名の命名規則

意外に議論していないな～と思ったのが、画像ファイルの命名規則。
私は、仕事ではできるだけ適当につけないようにしています。

背景画像で使用するものは「bg_xxxx.gif」、見出し部分を画像にしている場合は「ca_xxxx.gif」など。
こうすることにより、ファイル名からどのような画像なのかある程度予測はつくし、特にファイルフォルダから閲覧するときに、視認性が違います。
アンダーバーを使用せず、「bgMainContents.gif」のようにする場合もあります。

命名規則を考える真の意味

なぜ皆は命名規則の議論に白熱しているのか？なぜ命名規則を重んじるのか？
その真の意味を探りたいと思います。

ひとつは、作業効率が格段にアップするということ。
名前を付けること自体に悩むことは多いです。それだけで、時間が過ぎてしまいます。
また、ソースを他のプロジェクトなどに再利用することも容易になります。
実は、ソースを再利用できるということが、作業効率アップの肝だと思っています。
次に活かせる仕事をしているかどうかは非常に重要なことなのです。

もうひとつは、他の人と一緒にコーディングしたり、他の人が自分のソースを改修したりすることがあるからです。個人個人が好き勝手に名前をつけていたら、無駄なソースだらけになってしまいます。また、一貫性のない名前は混乱を招くだけです。
要は、皆が一貫とした意識を持っていることこそが仕事（プロジェクト）としてウェブサイトを作成するときに必要な事柄だと思います。

最後に

私自身、これといってid/classを分けていなかったのが現状。
理由はそれでも困らなかったから。
ただし、仕事で動的なプログラム（ここのコラムではJavaScriptやPHP、JAVAなどを指します。）と組み合わせることが多くなってから、困ることになってきました。
なぜならば、動的なプログラムも「id」を使用するからです。
JavaScriptやAJAXを使用すれば、classなども制御することができます。
一見、そのidがCSSのものなのか動的プログラムのものなのか見分けが付かなくなりました。

実際は、システム制御として動的プログラムを使用している場合は命名規則が違うからわからなくもないのですが、動的プログラムを使用してデザインを制御した場合はCSSファイルにないid名やclass名が出てきて混乱するわけです。

例えば、以下の当サイトのコラムを参考。
JavaScriptでロールオーバーメニューを作る || Cool Web Window

このコラムの下のほうでは、JavaScript(AJAX)によってロールオーバーメニューを作る方法を紹介しているのですが、AJAXによってclassを制御しています。これはCSSにはないclass名となります。

これからどんどん技術が上がってくれば、個人サイトでも動的なプログラムを使用したblogなども出てくることでしょう。
そのときにはCSSと動的プログラムの「id/class」の棲み分けが進んでくることでしょう。
そうなれば、命名規則はもっと重要になっていくような気がします。

まだまだ、命名規則に関しては勉強することが多そうです。
明日になったら、またこのコラムで書いた内容が180度変わっていることもあるかもしれませんね・・・。