HTMLコーディングの際に、参考になるポイントをまとめてみた。

職場で、コーディングガイドラインを作ることになった。よくあるガチガチのガイドラインではなく、できるだけコーダーの個性を損なわない柔軟なものを目指したいと考えて草案を作成した。だってそのほうが、新たな発見やひらめきで「成長」できる余地が大きくなるし、何より、楽しくコーディングできるでしょ?今日は、そんなゆるいガイドライン草案から、気になるものをいくつかピックアップして紹介します。

開始タグと終了タグのインデントを揃える

例えば、静的なサイトをコーディングするのと、CMSなんかで細かく分かれたHTMLの部品を集めてテンプレートを作るのでは、完璧なインデントを付加する難易度が大きく変わってくる。全部を完璧にしたいときもあれば、インデントを使わないほうが都合がいいときもある。とにかく、インデントを使おうと使うまいと、「開始タグと終了タグのインデントを揃える」というルールさえ徹底されていれば、混乱することはない。

<body>
 
    <div id="header">
        <h1>title</h1>
        <p>description</p>
    </div>
 
<div id="footer">
<p>copyright</p>
</div>
 
</body>

ちなみに、自分はCSSを書くときもインデントを積極的に使っている。階層の深さで視覚的にグループ分けができて、直感的に分かりやすくなる。例えば以下のように。

#header {
	margin: 0;
}

	#header h1 {
		border: solid 1px #ccc;
	}

	#header p {
		margin: 0 0 10px 0;
	}

#footer {
	border-top: solid 1px #ccc;
}

ヘッダー部分とフッター部分が一目で分かる。

CSSファイルはできるだけ1つにまとめる

昔、リセット用CSSがブームになり、CSSのコンポーネント化が叫ばれていたが、これを小~中規模のサイトでやろうとするのはまったくナンセンスだ。ライブラリのように、複数のサイトで同じファイルを使いまわせる箇所なんて、たかが知れているし、関係ないコードが増えるだけだ。そして、何より面倒くさい(逆に管理しやすくなるという人もいるから驚きだ!)。h1の文字サイズを変えるのと、上下の余白を変えるのに、別々のファイルを編集するなんて、考えただけでもゾッとする(極端な例だけどね)。共通部分とページ固有のものを分類して、セクションごとに、上から普通に書いていけば済む話だ。ただし、分割しちゃいけない訳じゃない。IEだけに読み込ませたいCSSなどを条件付きコメントで読み込ませるために、ファイルを複数に別けるのは当然のことだし、共通部分を含まないポップアップで開くだけのページのCSSのファイルを別にするのも理に適っている。

cssのカプセル化

これは、ちょっと呼び方が分からないので「カプセル化」と書いたが、要は、他のページに影響を与えないようにCSSを記述するということだ。基本的な考え方はシンプルで、bodyタグにページ固有のIDを付け、そのページにのみ適用したいスタイルには必ずそのID名から書くようにすればいい。優先順位の関係もあるので、classよりもIDのほうが無難だ。これは、先に出てきたCSSファイルを1つにまとめる際にも活躍する。今まで読み込むCSSファイルをページごとに変えていたものを、代わりにページごとにbodyのidを変えてやればいい。

#home h2 {
	font-size: 2em;
}

#about h2 {
	font-size: 1.2em;
}

同じh2でも、ページごとにサイズを変えることができる。

その他

他にもいろいろあるけど、まだ草案なのでこのへんで。