現在行っているプロジェクトや、明日行われるCSSniteLP3のコーディングコンテスト等を経て、
改めて気付かされたし、今後の自分としても徹底していきたいと思っているのが、
CSSファイル内のコメントや更新日の記述。
プログラムを組む人なら「当たり前」なことかもしれないが、
意外にCSSファイルに「更新日」や「コメントアウト」を見やすく入れていない人が多いようだ。
もちろん、コメントアウトの仕方はそれぞれでルールされてるものがあるかもしれないが、
自分のところは、少なくとも「更新日」と「項目関連付け」「セット用途」は義務付けしていきたい。
実は、CSSファイルも、他人が作ったもの程見難い。
しかも、IDやCLASSを全部省略形で書くソースは、後々に自分が見ても分からなくなる場合がある。
なので、ちょい如何にまとめてみておこう。
CSSファイルの見易さ工夫に・・・
- ファイル毎に、上部に「目次」を用意する。
「更新日」、「（連番付き）総目次」は、最低限つけたい。
「記述者名」や「編集者名」などは、プロジェクトによっては記述できない場合もあるので
そこは臨機応変に・・・ - ルールセットのグルーピングごとに、「連番＋見出し」
総目次とで関連付けして、他人が見ても探しやすいように・・・ - ハック記述や途中で追加したルールセットは、「コメントアウトを個々に記述」
何の用途に作った記述なのか、いつ追加したのか・・・
これも複数の人や会社が絡む場合や、後々で自分のためにも。 - セレクターは、出来るだけ「省略形で記述しない」。
使い方や、コメントアウトとの工夫次第かもしれないが、
幅広く使うルールセット意外は「#（ID）」や「.（CLASS）」の前に要素名も記述した方が、
そのルールセットがどう(X)HTMLと連携しているか連想しやすい。
もしろん、セレクタ名の書き方自体もつけ方は、(X)HTML側は連想しやすくしたい。
...etc
実際に、複数の会社が絡んでいることで、
データがバックデートした際にも自分の首を絞めないためにもなるし、
他人本位であることでプロジェクトも円滑になるだろう。
例えば以下のように
@charset "utf-8";
/* ===== CONTENTS ============
last-updated: 11 May 2007;
1: Universal Reset
2: Accessibility Features
3: Back Ground Area
～（省略）～
11: NewsArea [2007.05.09 added]
============================ */
～（省略）～
/* ---------------------------------------------------------
11: NewsArea
--------------------------------------------------------- */
/* NewsArea Set
========================================================== */
body#news div.box {
width: 839px;
margin-bottom:20px; /* 2007.05.11 edited */
}
*:first-child + html body#news div.box { /* Only IE7 is applied. */
width: 840px;
}
書き方って、人それぞれあるんだろうけども、重要なのは「他人本位」でいることなんだろうな－と、最近実感。
たとえ、前社から引継ぎの案件であって、ドキュメントがなくても、ある程度は理解できたら次社でも混乱しなくていいんだろうと、思い知らされたのですよ。
実際、混乱した経験者として・・・
ただ、過剰に記述すると逆に見難くなるので、どこまで記述していくかは更に工夫が必要ですね。
関連記事
この記事が為になった方は ⇒
新着情報