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

パンくずリスト

locus
topicPath
breadCrumbs

メニュー

menu
menuArea
mainMenu
sideMenu
localMenu
subMenu
subBar

本文やメイン部分

contents
subContents
mainContents
contentsArea
column

表題

heading
headingMain
headingSub

フッター

footer
footerArea

著作権表記

copyright
copy