Webサイト構築の際、それぞれの要素にidやclass名を付けて作成していきますが、汎用性の高いid名やclass名を要素ごとにわかりやすくリスト化しておくと毎度名前を考えたり煩雑にならずに構築していくことができメンテナンス性が高まります。
まずは一般的な規則を確認していきましょう。
基本的なルール
- 半角英数字のみを使用する
- 記号は「-(ハイフン)、」、「_(アンダースコア)」のみ使用可能
- 機種依存文字は使用不可
- スペースは使用しない
- 先頭はアルファベットからはじめる(数字はNG)
汎用性の高い命名規則
▼レイアウト関連
site,page,contents,main,sub,header,footer,wrapper
▼ナビゲーションメニュー関連
nav,navigation,globalNav,utilityNav,guideNav,menu,pageMenu,subMenu,anchorMenu
▼メインコンテンツ内
area,article,section,subSection,item,mainHeader,mainArea,mainFooter,subArea,focusArea,entryArea,bodyArea,entryBody
▼概要やテキスト関連
summary,description,meta,text,catch,lead,pick,information,news,date,copyright
▼画像関連
photo,image,eye
▼リンク関連
exLink,relateLink,btn,bnr
▼注意書き
note,attention
▼パンくずリスト
topicPath,breadcrumbs
いずれにせよ、人それぞれ理解しやすく扱いやすい指定方法が異なることも事実ですが、複数人で管理するようなサイトの場合は、メンテナンス性を考えた名前を付けて利用することが望ましいでしょう。