cssのid、class名について

CSS on ,

cssレイアウトをする際に必要になってくるidやclassの名前。
あまり変な名前を付けると後で見た時に何を意味しているわからず、ごちゃごちゃになってしまいます。
またjavascriptなどが関わってくるとネーミングはとても重要なものとになります。
名前の付け方はこれが正解というものはないですが、誰が見ても何があるか分かりやすいものがいいですね。

今回はそんなidやclass名の一般的に使われているものをご紹介したいと思います。
色んなサイトを見たりして、自分が使いそうなものをまとめました。
idやclassの名前を付ける時に悩んだ時は参考にしてみてください!

■全体
wrapper wrap page container body box layout

■ヘッダー
header head top pagetop intro

■フッター
footer foot copyright pagebottom

■サイド
menu sub subNav links linkList sidebar

■ナビゲーション
globalNavi gnavi gnav navigation navi nav topNav navcontainer contentNavi

■メインコンテンツ
maincontent content contents main maincol mainbox

■範囲
section field fields division inner

■その他、部分的要素に使いそうなもの
entry entryBody entryblock entry item column contents-inner inner
ad ads extra entry entries comment comments
lead outline summary、abstract description topic topics spotlight

※使用しない方が良い名前
left、right など位置を表すものはレイアウトが変更になった時に矛盾が生じる。
red、blue、yellow など色を表すものは色が変わった時に矛盾が生じる。
size300px、width900、box500 などサイズを表すものはサイズが変わると矛盾が生じる。

見た目で名前を付けるのではなく、内容で名前を付けるのが基本ですね。
left、rightなんかは急いでる時に使っちゃうんですよね・・・

あと、ちょっとした事ですが参考程度にしてもらえたらと思います。
idやclass名が長くなった時に「 _ 」(アンダーバー)をつけるか、「 – 」(ハイフン)でつなげるか連結部分の文字を大文字にするか色々と方法があり悩んだ事もある方も多いかと思います。

■例
main-content(ハイフン)
main_content(アンダーバー)
mainContent(大文字)

昔はブラウザによってcssの解釈が異なり古いネスケやIEだとアンダーバーとハイフンはちゃんと表示できない事があり、長くなる場合は単語ごとに頭を大文字にするのが良いと言われていました。
しかし見にくい為か、最近はアンダーバーでもハイフンでも主要ブラウザは全て問題なく表示されるので、どっちかが使われる事が多いです。

この2つ表示では何も違いはありませんが、作成する際にちょっとした違いがあります。
これは自分がDreamweaverやTeraPadなどでサイトを作成しているからなのか、idやclass名をコピーする時、ダブルクリックで単語を選択するのですが、「 _ 」(アンダーバー)で接続されたIDやclassは、ひとつの単語として選択され、「 – 」(ハイフン)で接続されたIDやclassは、ハイフンごとにバラバラに選択されてしまうのです。

main-content(ハイフン)「main」「-」「content」として別れて認識
main_content(アンダーバー)「main_content」一つの単語として認識

こんなちょっとした事が作成の際には、楽になったりしますよ!