HTML、CSSを書く際に注意しておくべき点をまとめる
1. インデント
HTMLやCSSに限った話ではなく、コードのインデントは可読性に大きく関わる。
HTMLの場合はそれだけではなく、プレーンテキストの前後に改行があるかないかで表示がずれることがある。
なので、同様のレイアウトでもコーダーのインデントの裁量で違和感を覚えるページができる可能性がある（同様のレイアウトがあるのならテンプレート化すべきだが）
2. 命名規則
クラス名やIDの命名規則は、始まる前に意識の統一を図るべきである。
CSSが複数ファイルに分かれている場合などに、意図しないスタイルの適用ならまだしも、知らずにスタイルをオーバーライドしてしまう可能性がある。
ある程度コードができてから調整するよりは、始まる前に時間をとって話し合ったほうが確実にトータルコストは少ない。
最近（2014/07/20現在）BEMというHTMLの命名規則が有名なので、そちらを紹介しておく。
3. CSSリセット若しくはノーマライズCSSを使う
マルチブラウザを目標にしていなくても、拡張や変更が無いとは限らないし、理由がなければ入れておきたい。
どちらを使うかは、それぞれ微妙に役割が異なるので一概には言えないが、最近はノーマライズCSSが主流のようである。
normalze.css ダウンロードページ
DOCTYPEを宣言することは大前提。
4. HTMLのtype属性は省略しない
- HTML上は<input />と<input type="text" />は同じ表示となるが、JavascriptやCSSで属性セレクタを使用すると、結果が異なる。（input[type="text"]では、後者の要素のみが取れる）
- <button>のデフォルトはsubmitになっているため、Javascriptでsubmitするようにイベントリスナをバインドしている場合、二重submitになる場合が少なくない。
5. CSSのセレクタの使い方に注意する
この項目はBEMの理念と矛盾するところがあるので、妖怪人間の方々は読み飛ばしてください。
- 出来る限り子孫セレクタを使用すること（隣接セレクタや小セレクタは拡張・変更に弱いのでおすすめしない）
- 複数クラスを用いて、スタイル適用を拡張するようにする 例）
<style>
.button {
/* 何かボタンっぽく見せるスタイル */
}
.button.warn {
background: #FF0;
}
.button.alert {
background #F00;
}
</style>
<div class="button warn">Warning</div>
<div class="button alert">Alert</div>
以上、大まかなポイントをまとめたが、本来はどこかのコーディング規約をそのまま採用し、BEMを採用すると決定してしまえば確実かつ、安全である。
ルールが外部で明確に定められているので、認識に齟齬も生じにくい。
参考までに、