以前に「もう、class名やid名で悩まないんだからっ！！」というエントリーを書いたのだけど、自分がよう使うid名とclass名のまとめと、その辺の理由付けをしてみよーかなぁと思った。

後、idとclassの使い分け絡みもちょっと書くかも。

こーいう内容を書くと反応が怖かったりするけど、ソレもまた勉強なり。とか思って自分なりの今の考えを書いてみようと思います。

先に言っておきますが、コレから書く事が正解とかこう付けるべきって解釈はしない感じでお願いします。
コイツはこう考えてるんだ。くらいで読んでいただければ幸いです。えぇ。

全体を囲む際によく使うかなっていう系

#page

idでコレをつける事が最近多いです。
wrapperとかwrapを使わないのは、脳内がサランラップに犯されているからっていうやる気の無い理由もありますが、「このサイトのこのページ。」なんだからpageがしっくり来たなぁ～っていう感じで使っております。
div要素がdivisionの略で区切りとかココからココっていう範囲とかって解釈してるので、その範囲もしくは区切りを包み込むって感じで捉えて、wrapperも問題は無いよなーとか思ったりあんまり考えてなかったり。

上んトコロに使っている系

#head
もしくは、
#header

略すのを嫌う人も居るけれど、ものっそいめんどくさがりなボクに略すなっていうのは中々ハードルが高いんよ。とか長いとスペル覚えれません！っていう理由で#headを使う事が多いんだけど、上んトコロはやっぱりこの2択かな。

idなのかclassなのかってのが話題になったりするけど、最近の考えとして「どっちでもええなぁ～」っていう感じ。
よく使い分け方の説明でもっとも簡単に言ってるのが、idはページ内に1つでclassは複数使える。
が有るけど、さすがに説明不足だよね。と思う。

で、犬とか学校とかの例えを見たりするけど、何となく「自分」で例えて見ると、ボクは埼玉の何たら市に住んでる平澤 隆っていう独身男性。
だとしたら、コレidだ。って感じで唯一無二。

でも、デジパの社員ってのも、間違いじゃない。
そしたらclassだよね。

2バイト文字は使えないけど、↓こんな感じかしら。

  • #埼玉の何たら市に住んでる平澤 隆っていう独身男性
  • .デジパの社員

だーけーどー、日本から見たらデジパの社員がidでも良いと思うんだ。

で、headerってのは、ページ内には確かに一つしか無いからidだな。っていう感じがするけど、サイトっていう視点で見たらheaderっていうグループなんだからclassでもいいな。と。
でもその視点で見た場合、idはサイト内に1つしか使えないという縛りを与えてるからidの使いどころが益々難しい気がする。

どの視点で見るかでもダイブ変わってくる気がするし、抽象的に見れば見るほど全部classに見えてしまう。
唯一無二なんてそんなにない気がするけど、唯一無二のみidだと使うタイミングが…

視点っていう考え自体も、idとclassはそもそもページ内で考えるもんだ。っていう気もするし。
難しいなぁ～

ちょっと変わって実際の案件ベースで考え、変な例えを出してみると、今この部屋には人間がボクしか居ないんだから人がidでもいいと思うけど、仕様変更が有って壁がぶち破れました。ってなったら隣の人も居るから人はclassになるよね。

そういった仕様変更は実際の案件でボチボチ有ったりする訳ですよ。（headerが2つになる事はまず無いと思うけど）
そうなった場合にid並べても表示上問題ないからいいや。とはさすがにいかない。
後から泣く泣くclassに変えるのは嫌なんで、変わる気がするっぽい場所はclassで付けた方が無難だよね。って思う。

何か長くなったけど、headerはページから見てたら唯一な存在だし、仕様変更の恐怖もないからidだなっと。

この辺はあんまり考えてると頭痛くなるんで、脳みそ最近使ってないな。って時に考えよう。
むしろ、そういう事を考えてる人に任せよう。

ナビゲーションっぽいの

#gNavi

書き方の基本はらくださん。いつからラクダ系を使うようになったか覚えてないけど、サラダボウルの人の影響が大きいかも。

らくださんの参照：Class名とID名の命名規則 | Blog hamashun.com

パンくずっぽいの

#topicPath

コレも最近色々考えておりますが、コレだ！ってのが浮かばないから今はtopicPath。
navigationとかでも全然いいけど、グローバルナビとかと混同しちゃいそうなんよね。

サイドっぽいのとメインっぽいの

#container

サイドとメインがどっちも入ってる、入れ物っていう区切りなんだ！
という事で許してください…

サイドっぽいの

#sub
#side

辺りが多い。
sideに違和感を感じはじめているから、subを主流にしようと思ってます。
違和感を感じるのは、sideって「側」だから、右側とか左側って意味で使っちゃってたら位置情報になってる気がする。

メインっぽいの

#main

ほぼコレ1択。
主な内容だからmain。

メインの中にくるっぽいの

.section
.text
.entryBody

sectionは分割とか分けるだから、大きな段落を分けるって意味で使うかな。
textも本文なんだから意味としては良いと思っております。
entryBodyは、、、MTタグから使い出した…
ってだけだと怒られそうだな。
意味を考えても、間違いじゃないと思うので結構使います。

そのページ限定のメインっぽいの

この場合は、例えばプロフィールページ限定なら、body要素に#profileとかって付けたり、

div class="text profile"

みたいにつけてます。
基本的な部分はtextで適用されてるスタイルと同じだけど、プロフページのみ特殊な配置な場合ね。

より具体的なとこ

コレが結構悩ましい部分で、よくある代表挨拶の後にある名前だったら、

.name
#presidentName
#sign
#kiritani

とかかなぁ～
最後のはウチの代表の名前を勝手に使わせて頂きました。

大体の場合が、右寄せだったりするから右寄せ関係をまとめたいなーって思うと、「もうちょっと抽象的なんだけど意味として間違ってない」のを探したりもするけど、最近は結構限定して付けてる傾向が多いかも。
その場合は、右寄せ関係だけまとめて、

#presidentName,
.more,
.externalLink,
.btn {
	margin:0 0 1em 0;
	text-align:right;
}

みたいにしてます。

何か画像が回り込んでるっぽいとき

コレは悩むんですよ。
なんでこの画像は回り込んでいるんだろう？って。
で、最近は汎用性も考慮して、

.photo

が多い気がする。
写真じゃないなら、

.graph

とかそういう感じだと思うけど。

あ、でも大抵の場合はその内容に対する補足説明の為の画像だから、

.descriptionImage
.summaryImage
.supplementImage

辺りがいいんじゃん！と今思った。

下んトコロっぽいの

#foot
#footer

headと同じです。

その他、どうしても困った時

辞書サイトか翻訳サイトで色々調べて一番しっくり来るヤツにする。

もうコレしか手段がないです。英語とか分かりません。えぇ。

今回上がったid、class名一覧

  • #page
  • #head
  • #header
  • #gNavi
  • #topicPath
  • #sub
  • #side
  • #main
    • .section
    • .text
    • .entryBody
  • .name
  • #presidentName
  • #sign
  • #kiritani
  • .photo
  • .descriptionImage
  • .summaryImage
  • .supplementImage
  • #foot
  • #footer

最後に

色々考えれば考えるほど、id名やclass名って悩みますね。
そんなボクの悶々とした内容を書いてしまって申し訳ないと思ったりもしますが、こうやって悩むのもいいよね。

しっかし、これ書くのすんげー時間が掛かった…