【CSS】CSS のコメントの書き方

HTML&CSS

2007.12.20

CSS コーディングのキモは「設計」にあります。
ただ漫然とコーディングしてしまうと、コードが肥大化してしまって本来 CSS のメリットであるはずの汎用性・メンテナンス性が著しく低くなってしまいます。

CSS のコーディングでは「コメント」を活用すると、全体の見通しが良くなって「設計」がしやすくなります。
いきなりセレクタとかプロパティとかを記述する前に、あらかじめサイトの構成（エリア）を CSS コメントで区切っておくと、その後のコーディングがとても楽になるのでお勧めです。

シーブレインで採用している CSS コメントにはレベル（階層）があります。コメントに階層を設けることによって、より設計しやすくしてやろうという魂胆です。
以下がその例です。

/* =========================================================
 Level 1
========================================================= */


/* Level 2
--------------------------------------------------------- */


/* ----- Lavel 3 ----- */


/* Inline */

実際には以下のようなソースになります。

/* =========================================================
 Information
========================================================= */
div#information {
	width: 30em;
}

/* News
--------------------------------------------------------- */
div#information dl#news {
	width: 30em;
}

/* ----- Date ----- */
div#information dl#news dt {
	width: 10em; /* Edit 07-12-20 */
}

:
:

コメントにもローカル・ルールを決めておけば、グループ作業での効率アップも期待できますね。