シンプルで汎用性のあるコーディングとは

他人の書いたソースを修正するのって大変ですよね。

それぞれ人によってルールも考え方も違うので、ソース全体のルールを把握してから取り掛からないと、後から見たときに「グチャグチャ」なんてことになってしまいます。

今回は、私の考える「汎用性のあるHTMLとCSSのソースのルール」をご紹介します。

ルール1、区切りの良いところでインデントとコメントを入れる。

後から見たときに、どこからどこまでが一つのブロックかが分かるように、インデントとコメントをつけよう。
[html]
<!– START header –>
<div class="header">

<ul>
<li></li>
<li></li>
<li></li>
</ul>

</div>
<!– END header –>
[/html]

ルール2、よく使うスタイルは、テンプレートとして用意しておこう

下記のようなよく使うスタイルは別で用意してあげておくと、CSSファイルが無駄に縦に伸びないのでシンプルになります。
[css]
.mb10{ margin-bottom:10px; }
.mb20{ margin-bottom:10px; }
.mb30{ margin-bottom:10px; }
.mb40{ margin-bottom:10px; }

.strong{ font-weight:bold; }
[/css]

ルール3、クラス名とコンテンツの内容は関係ないものにする

「news」や「interview」など、コンテンツの内容を表すクラス名を設定してしまうと、
別のコンテンツに同じクラスの内容を設定するときに、また新しく同じクラスを作らなくてはならなくなります。
もしくは、無理矢理そのクラスを使って、事例を表すコンテンツなのに、クラス名は「news」なんてことになってしまいます。

これを防ぐには、コンテンツの要素ではなく、マークアップ的観点からクラス名を設定します。
[html]
<!– START header –>
<div class="box01">

<ul class="list01">
<li></li>
<li></li>
<li></li>
</ul>

<p class="txt01"></p>

</div>
<!– END header –>
[/html]

簡単にいうと、どこでも使える汎用的な名前にしようね、ということです。
私がよく使うのは下記のような感じのクラス名です。

[css]
.txt01{ //中身 }
.box01{ //中身 }
.cont01{ //中身 }
.tit01{ //中身 }
.list01{ //中身 }
.dl01{ //中身 }
[/css]

txt02、txt03、と別バージョンが増えていくわけです。

ルール4、ズラズラ複合セレクタを指定しない。

たまにあるのが、下記のようなクラスの指定をする方法。
[css]
div.header .news dl dd.tit01 p span.color01{ //中身 }
[/css]

こういう指定をしちゃうと、例えば似たような「tit02」を別の場所に指定してあげたいときに、
非常にめんどうになります。

大体こういう指定をする人は、「div.header」や「.news」などにもいろいろ指定しているので、
単純にtit01と同じ見え方で別の場所に「tit02」を作ろうとしても、すごい手間がかかります。
イマイチうまく説明ができませんが、そうなんです。

なので、複合セレクタはあんまり長くせずに、その場所を最も的確に表す、かつ固有のセレクタにしましょう。

ルール5、目次を作ろう

初見のCSSでもどこになにがあるか分かるように、CSSソースの最初には目次を作ろう。
[css]
/* txt */

/* tit */

/* box */

/* margin */

/* header */

/* main */

/* footer */
[/css]

あとは、更新の度にしっかり整理整頓することですかね。

これからプログラムばかりでコーディングをスッカリやらなくなるかもなので、
自分のための戒めとして、まとめておきました。

なにかのお役に立てば幸いです。