他人の書いたソースを修正するのって大変ですよね。
それぞれ人によってルールも考え方も違うので、ソース全体のルールを把握してから取り掛からないと、後から見たときに「グチャグチャ」なんてことになってしまいます。
今回は、私の考える「汎用性のあるHTMLとCSSのソースのルール」をご紹介します。
ルール1、区切りの良いところでインデントとコメントを入れる。
後から見たときに、どこからどこまでが一つのブロックかが分かるように、インデントとコメントをつけよう。
<!-- START header --> <div class="header"> <ul> <li></li> <li></li> <li></li> </ul> </div> <!-- END header -->
ルール2、よく使うスタイルは、テンプレートとして用意しておこう
下記のようなよく使うスタイルは別で用意してあげておくと、CSSファイルが無駄に縦に伸びないのでシンプルになります。
.mb10{ margin-bottom:10px; } .mb20{ margin-bottom:10px; } .mb30{ margin-bottom:10px; } .mb40{ margin-bottom:10px; } .strong{ font-weight:bold; }
ルール3、クラス名とコンテンツの内容は関係ないものにする
「news」や「interview」など、コンテンツの内容を表すクラス名を設定してしまうと、
別のコンテンツに同じクラスの内容を設定するときに、また新しく同じクラスを作らなくてはならなくなります。
もしくは、無理矢理そのクラスを使って、事例を表すコンテンツなのに、クラス名は「news」なんてことになってしまいます。
これを防ぐには、コンテンツの要素ではなく、マークアップ的観点からクラス名を設定します。
<!-- START header --> <div class="box01"> <ul class="list01"> <li></li> <li></li> <li></li> </ul> <p class="txt01"></p> </div> <!-- END header -->
簡単にいうと、どこでも使える汎用的な名前にしようね、ということです。
私がよく使うのは下記のような感じのクラス名です。
.txt01{ //中身 } .box01{ //中身 } .cont01{ //中身 } .tit01{ //中身 } .list01{ //中身 } .dl01{ //中身 }
txt02、txt03、と別バージョンが増えていくわけです。
ルール4、ズラズラ複合セレクタを指定しない。
たまにあるのが、下記のようなクラスの指定をする方法。
div.header .news dl dd.tit01 p span.color01{ //中身 }
こういう指定をしちゃうと、例えば似たような「tit02」を別の場所に指定してあげたいときに、
非常にめんどうになります。
大体こういう指定をする人は、「div.header」や「.news」などにもいろいろ指定しているので、
単純にtit01と同じ見え方で別の場所に「tit02」を作ろうとしても、すごい手間がかかります。
イマイチうまく説明ができませんが、そうなんです。
なので、複合セレクタはあんまり長くせずに、その場所を最も的確に表す、かつ固有のセレクタにしましょう。
ルール5、目次を作ろう
初見のCSSでもどこになにがあるか分かるように、CSSソースの最初には目次を作ろう。
/* txt */ /* tit */ /* box */ /* margin */ /* header */ /* main */ /* footer */
あとは、更新の度にしっかり整理整頓することですかね。
これからプログラムばかりでコーディングをスッカリやらなくなるかもなので、
自分のための戒めとして、まとめておきました。
なにかのお役に立てば幸いです。
コメント