CSSネーミング規約

以前勤めていて、今はつぶれてしまったWeb制作会社で、僕がチームリーダーしていた時に作った資料です。
XHTMLが全盛だった時代なので今は古い情報ですが、まあこのまま削除してしまうのも勿体ないので、資料として公開します。

CSSクラスのネーミングルールと記述方法

制定日:2007-12-11 Ver.1.00
改訂日:2008-10-30 Ver.1.10

CSSネーミングの大前提

ネーミングする際の前提

  • class名や id名は、誰が見ても意味がわかる名前にすること。
  • 将来に渡って一意性を保つために、字数の多寡にとらわれずないこと。
  • 後々理解しやすい様に、なるべく略記しないこと。
  • エラーを防ぐためメタ文字や予約語は使わない
  • デザイン内容ではなく、用途をクラス名にする。

コード共有のためには避けたい命名事例

短縮表記されているもの
  • 悪い例)nav, gnav, bmarks, sec1, nl, mframe
  • 良い例)navigation, globalNavi, bookMarks, select1, nameList, mainFrame
英語以外の言語表記が混じってるもの
  • 悪い例)pankuzu, daimei, tyuui → 日本語ローマ字など
  • 良い例)locus, heading, attention

長いネーミングの記述方法

  • 記述方法を統一し、大文字・小文字を区別すること。
  • class, id の値にはアンダースコアはなるべく使わないこと。
  • 基本はcamel(キャメル)記法でおこなう。

camel(キャメル)記法 / namingStandard

2つ目の単語の1文字目のみ、大文字で記述するパターン。
これは動作に問題が無く、また可読性も若干上がるので、現状でベターな書き方。
手書きで記述していく際にはケアレスミスに気をつけること。
例)main + contents ⇒ mainContents

アンダースコア区切り / naming_standard

可読性は向上するが、IE3、IE4、NN4.x(MAC)、NN6(初期Ver,)等の
ブラウザで認識されないバグがある。
使用するならそれを理解しているという前提で使うこと。
例)main + contents ⇒ main_contents

ハイフン区切り / naming-standard

可読性は非常に高いが、IE3で無視されるのでベターな書き方ではない。
例)main + contents ⇒ main-contents

ネーミングサンプル

全体の枠組み

  • wrapper
  • wrapperAll
  • container
  • layout

ヘッダー

  • header
  • headerArea
  • headline

ナビゲーション

  • navigation
  • globalNavi(サイト全体のコンテンツナビ)
  • localNavi (2階層以下へのナビ)
  • directNavi (目的のコンテンツに直接アクセスするナビ)
  • remoteNavi (ヘッダー・フッター等にあるサイトマップ等へアクセスするナビ)
  • mainNavigation
  • contentNavi

パンくずリスト

  • locus
  • topicPath
  • breadCrumbs

メニュー

  • menu
  • menuArea
  • mainMenu
  • sideMenu
  • localMenu
  • subMenu
  • subBar

本文やメイン部分

  • contents
  • subContents
  • mainContents
  • contentsArea
  • column

表題

  • heading
  • headingMain
  • headingSub

フッター

  • footer
  • footerArea

著作権表記

  • copyright
  • copy