CSSや画像の命名規則について

2012-02-09

コーディングで時間のかかる要素の1つとして、id,class名や画像名などの命名規則が挙げられます。
特に中規模、大規模のサイトで、適当な名前を付けると名前が被る確率が上がり、
その結果、画像の上書きや不要なプロパティがかかってしまうなど、よくない結果になることも考えられます。
一つの例として、私の命名規則について紹介してます。参考程度に読んで頂けると幸いです。

カテゴリに分類して、つなげる。

ページのどの位置に属すか分類し、つなげる方法を取っています。
基本的に、CSSや画像名は同じにします。同名にすることで、名前を考える手間も省け、変更箇所の特定がしやすくなります。

例：

CSS: #top-side-nav
画像: top-side-nav-home.png
top-side-nav-company.png

上記のように命名することで、
デザインを見なくても、どのような箇所に使われているか、想像しやすくなると思います。

分類方法

5つのカテゴリに分け、以下の順番に合わせて名前をつけます。
また該当しないカテゴリは省略します。

ページ(共通部分)
top, company, contact...
(共通部分は省略、または site, global, formatなど)
位置
header, footer, site, main, contents...
要素
navigation, flow, step, list, copyright, pagetop, area, news, breadcrumb, item, block...
属性
icon, banner, background, image, title...
任意
sign(署名), confirm(確認), send(送る), photo(写真), error(エラー), fes2012, 連番(1, 2, 3...)...

以下の画像が例になります。
5つのカテゴリに分けますが、省略するので結果的に3～4つの単語の連結になります。
ただ「copyright」などはサイトに1つしか存在しない可能性が高いので、単語1つだけにしています。
共通部分になりえる部分は、基本的に省略や「site」などの接頭辞をつけています。

なぜ上記のような命名規則をとるに至ったか？

ページごとにid,classを使用して、詳細度を上げたコーディング

ページごとにidやclassを使用して、子孫によって詳細度を上げます。

例


<style>
.outline .line {
	width:290px;
	margin-right:-10px;
	overflow:hidden;
	zoom:1;
}
.outline .line .size1of2 {
  float:left;
	width:135px;
	margin:0 10px 10px 0;
}
.outline .line .size1of2 img {
	border:1px solid #000;
}
</style>
<body id="outline">
<div class="line">
<div class="size1of2"><img src="images/photo.jpg" alt="" /></div>
<div class="size1of2">test</div>
</div>
</body>

この方法だと、CSSのパフォーマンスがよくありません。
参照：CSSの記述 : Webデザイナーでもできる、サイトのパフォーマンスをあげる5つの方法

CMSなどを使用する場合、ページごとのbodyにidやclass名を適切に振り分けることが難しい場合もあります。
その場合、コンテンツの部分にdivでくくれば対応は可能ですが、余計なdivが増えることになります。

ただページのID名などを付けることで詳細度が高まり、ページが分かりやすくなるのも事実です。
ページのID, class名とするのではなく、ページを接頭辞とすることにしました。
先ほどのソースであれば、以下のよう変更できます。


<style>
.outline-line {
	width:290px;
	margin-right:-10px;
	overflow:hidden;
	zoom:1;
}
.outline-size1of2 {
  float:left;
	width:135px;
	margin:0 10px 10px 0;
}
.outline-size1of2 img {
	border:1px solid #000;
}
</style>


<body>

<div class="outline-line">
  <div class="outline-size1of2"><img src="images/outline-photo.jpg" alt="" /></div>
  <div class="outline-size1of2">test</div>
</div>

</body>

子孫が減るためパフォーマンスが良くなります。
詳細度が高まることで、結果的に画像の名前に使用しても名前が被ることなく、場所の特定がしやすくなりました。

OOCSS

OOCSS(Object Oriented CSS)

日本語にすると"オブジェクト指向CSS"
視覚情報のクラスを用意し、設定を拡張して行う、書き方。
私の命名規則の方法とは逆に、命名規則の詳細度を上げずに、CSSの再利用性の高いコーディングを行うことができる。

通常のCSS

.outline .line .size1of2 {
  float:left;
	width:50%;
	margin-bottom:10px
}

上記のCSSのように子孫を増やすコーディングでは名前がバッティングしにくいですが、CSSのパフォーマンスが悪くなります。
OOCSSは視覚情報を追加する方法で、

CSS

.line{overflow:hidden;}
.unit{float:left;}
.size1of1{float:none;}
.size1of2{width:50%;}
.size1of3{width:33.33333%;}
.mT10{margin-top:10px;}
.mT20{margin-top:20px;}
.mT30{margin-top:30px;}
.mT40{margin-top:40px;}
.mB10{margin-bottom:10px;}
.mB20{margin-bottom:20px;}
.mB30{margin-bottom:30px;}
.mB40{margin-bottom:40px;}

HTML

<ul class="line">
  <li class="unit size1of2 mB10"></li>
  <li class="unit size1of2 mB10"></li>
  <li class="unit size1of2 mB10"></li>
  <li class="unit size1of2 mB10"></li>
</ul>

上記ソースコードのように、コンテンツ名に属さない、視覚情報をクラスを拡張して行う方法をOOCSSといいます。

先ほど紹介したレベルなら、まだ修正が行えますが、CSSをフレームワーク化させるようなものなので、何も知らない人が見た場合、CSSを読み解く学習コストが発生します。
他の人が触らなければならない場合や後から見返す場合などを考慮すると、詳細度の高い命名規則の方が良いと思います。

mB10などは、よくない典型例ですが、ただ視覚情報をクラスとして扱うことは良いと思います。
視覚情報をクラスとした有名なものとしてclearfixが挙げられると思います。
複数プロパティがまとまったものを1つのクラスとして用意しておくことは、作業の効率化に繋がります。

ページごとにID,class名をつけたりしていると、詳細度を高くしているので使いまわせないケースも出てきます。
また、使い回せるクラスを用意しても、そこだけまとまりのないクラス名が多くできる可能性もあります。

「format」「common」などの接頭辞、または接頭辞がなくても分かりやすいクラスを用意しておき、使いまわせるようにしておくと便利かもしれません。

連番の命名規則について

理想としては、全ての要素にちゃんとした名前を与えてやる方が良いですが、業務形態や工数など様々なケースによって、名前を全て考えられる余裕が無い場合、連番も必要だと思います。
その代わり、連番を行う場合も単に「#con1」や「01.jpg」などではなく、詳細度の高い命名規則に則った方法を取るべきだと思います。

デメリット：カテゴリを繋げていると、名前を付ける際に長くなる

ページ名などを接頭辞とするこで、詳細度は上がりますがクラス名が長くなります。
繋げる文字を分かる範囲で短縮、省略、キャメルケースの記述など工夫が必要です。
例えば

header-navation-link　→　h-nav-link
information-button-contact　→　info-btn-contact
company-photo-area-overview　→　coPhotoAreaOveriew

名前が長くなることがネックですが、メリットとして

CSS、画像の名前を同時に付けやすい。
慣れれば、直感的に名前を付けられるようになる。
名前のバッティングを防ぎやすい。
ページ単位、また共通部分のCSSを確認、修正しやすい。
CMSなどに組み込む時の汎用性が高い。

命名も意外とコーディングで時間がかかる部分です。
効率化のために、上記を参考程度に考えてみてはいかがでしょうか？

※追記

私はCSSをキャメルケースで記述する場合が多いですが、キャメルケースは見慣れていない人にとって読みにくいので「ハイフン」で表示させて頂いています。
つなげている単語は「ハイフン」「アンダースコア」「キャメルケース」どれでもいいと思います。
命名規則は使用しているエディタの種類、コーディング手法に合わせて最適なものを選択し、他の環境に移っても分かりやすいければいいと思います。
冒頭や文末で「参考程度」としているのはその為です。自分の環境に合わせて、命名規則を再度考えてみてはいかがでしょうか？