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

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

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

今回は、私の考える「汎用性のある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 */


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

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

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

関連する記事


Fatal error: Call to undefined function similar_posts() in /home/sites/heteml/users/p/e/n/pencoro/web/picxpic.com/wp-content/themes/neutral/single.php on line 38