CSSを定義する際に便利なのがclassとid。毎回固有のclass名やid名を考えるのは最初は戸惑うものです。
「何かわかりやすい命名規則はないか…」
「自分でつけているこの名前って問題ないのか…」
「毎回名前を考えるのが時間がかかる…」
といった問題は意外と大きいものです。
何が正解というのはないですがある程度自分の中でルール化しておくと修正や更新をする際にラクだし、他の人が読む時もわかりやすくて時間のロスになります。
大きいエリアや広範囲のものに使える名前
メインのコンテンツやヘッダー、サイドバー、フッターなど、わりと大きめのエリアに使うときに使うケースが多い名前です。
header, head, heading
名前の通り、要素の上部分やヘッダー自体に使ったりします。html5になってからはheaderタグが加わったので前程使うケースは少なくなってきました。
使用例:
<div id=”header”></div>
<div class=”head”></div>
要素の上部やヘッダー付近に使えるもの一覧
head
heading
top
headline
headTop
headerTop
topArea
main, mainArea, contents, mainContents
こちらはそのページの中で主役となるエリアや中心となるコンテンツなんかによく使います。
他にもcenterArea, centerContents, mainBox, centerBlockなどなど。contentsが長いときはcontとか略したりもします。
使用例:
<div id=”main”></div>
<div class=”contents”></div>
ページの中で主役となるエリアや中心となるコンテンツに使えるもの一覧
mainArea
contents
mainContents
mainContainer
blockArea
mainSection
mainBox
contentBlock
サイドバーやサイドに置くコンテンツ用に使います。html5のasideタグがでてきてこちらもそんなに使わなくなりました。
左側のサイドバーという意味で単に「left」とやったりするとcssを眺めた時に「leftってどこのleftだろう?」とごっちゃになることが多いので、その場合はsideLeftなどにしたり、後々サイドバーを入れ替えることが考えられるときはsideOneとかsideTwoとかにすることをお勧めします。
※位置などは変わることが多いのでそもそもleftやrightというのはあまりおすすめではない
使用例:
<div id=”side”></div>
<div class=”sidebar”></div>
サイドバーやサイドに置くコンテンツ用に使えるもの一覧
sidebar
sideOne
sideTwo
menu
sideMenu
sideContent
sideArea
sideLink
sideBnr
sideBlock
要素の下部や下エリアに使うときに。ページのフッター部分だけではなく何かのボックス要素のボトム部分とかでも使えるので割と使ったりします。
使用例:
<div id=”footer”></div>
<div class=”bottom”></div>
要素の下部や下エリアコンテンツ用に使えるもの一覧
foot
bottom
bottomArea
footerArea
boxFoot
boxBottom
blockFoot
blockBottom
単純な囲いや限定的な要素に使える名前
意味はないけど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>
囲う系の名前使えるもの一覧
wrapper
inner
headWrap
headWrapper
headInner
mainWrap
mainInner
sideWrap
footerInner
topWrap
centerWrap
postWrapper
contentsInner
ttlWrap
blockWrapper
boxInner
bnrWrap
限定的に「ここだけ」みたいな感じで使える名前です。上記以外の部分など。個人的にはよく使いますね。
下の一覧と今までのエリアごとの区分けで出てきた名前の組み合わせでほとんどいけると思います。
使用例:
<div class=”summary”></div>
<div class=”breadcrumb”></div>
限定的なエリアやその他の名前一覧
breadcrumb :パンくずリスト
detail :詳細部分
more :詳しくはこちらエリアなど
bnr :バナー部分
ttl :タイトル
common :共通部分
mainVisual :主要画像部分、メインとなるイメージ画など
slide :スライダー部分
message :メッセージや説明文などが入る部分
info, informaiton :情報やデータ部分
data :データ
gNavi, globalMenu gMenu :グローバルナビゲーション、メインメニュー部分
firstChild :最初の要素
lastChild :最後の要素
date :日付部分
category :カテゴリー部分
tag :タグ部分
division :何かを分けているものやエリア
eachArea :それぞれのエリア(繰り返し表示するブロックなどに)
description :説明文エリア
caption :キャプション、ちょっとした説明
buttom :ボタン系
entry :エントリー、記事部分
genre :ジャンル、種類系
thumb, thumbPic :サムネイル
toTop :トップへ戻るボタン
おまけ:アンダーバーかキャメルケースか
class名やid名を書くときにどっちにしようかと一度は考えたのではないでしょうか?
main_contents, head_area, ttl_bnrなど
要素と要素の区切りをアンダーバー(アンダースコア)を使って区切る・キャメルケース
mainContents, headArea, ttlBnrなど
先頭意外の要素の1文字目を大文字にする
どっちが優れているというのはなくプロジェクト毎にルール化されていることが多いです。あとは個人的に好きな方を使う…という感じ。
ちなみに僕は最初アンダーバーで書いていましたが文字が長くなるのが気になったので今はキャメルケースで書くことが多いです。メリットは文字数が少なくなることですが、しばらくして慣れてきた頃感じたデメリットはCSS以外のプログラミン言語や単純にファイル名などを考慮したときアンダーバーの方が汎用性があるかも…と思いました。今は慣れてしまったので特に不自由はしていませんが、まあ人それぞれですね。
※追記
現在(2017/3月)はキャメルケースではなくアンダースコア(アンダーバー)で統一しています。
※追記
現在(2018/6月)はアンダースコア(アンダーバー)からハイフンに変更しました。Twitter BootstrapやFoundation等のCSSフレームワークで採用されているためです。