HTML,CSSコーディング上の注意

他者が作業したコーディングや構造設計の悪い部分を指摘しています。

余計なdivを使わないでください。

clearfixを適用するためだけにdivで覆う例が見られます。
また、ulやol、dl,tableなどの子要素を内包できる要素はそれ自体が要素をまとめる意味を持ちますので、あらためてdivで覆う必要はありません。
そもそも全てのモノをdivで覆おうとしないでください。むしろdivはできるだけ使わないでください。
div、spanは出来る限りゼロに近づけるようにしてください。適切な要素を使った上で、デザイン上どうしても必要な場合のみdivを用いてください。

<!-- 悪い例 -->
<div class="clearfix">
    <ul id="h-info">
    </ul>
</div>

<!-- 良い例 -->
<ul id="h-info" class="clearfix">
</ul>

<!-- さらに良い例 -->
<ul id="h-info">
</ul>

特殊文字を文字として出力しないでください。

例として見受けられたのが”>”や”▶”の使用です。
▶などは完全に機種依存文字ですので、画像や他の記号で代用してください。

htmlを構成する記号は全てHTML特殊文字で表現してください。

`<` = &lt;
`>` = &gt;
`&` = &amp;
` ` = &nbsp;
`　` = &emsp;
`©` = &copy;
`®` = &reg;

詳しくは、
HTMLの特殊文字

cssファイルは用途別にファイルを分けてください。

全てのスタイルを一つのstyle.cssに記述する例が見受けられますが、必ず用途別に分離してください。

【分離例】
├reset.css(全体のスタイルをリセットする)
├layout.css(全体のレイアウトを定義する)
├page.css(ページ毎の局所的なスタイルを定義する)
├sp.css(スマートフォン用のスタイルを定義する)

また、作業者が複数人いて、担当ページが決まっている場合などは作業者単位でCSSを分けるのも有効です。

background-colorの指定にrgba値を使わないでください。

rgba値はIE8以下に対応していません。
必ず16進数のカラーコードか、カラースキーマを使用してください。
透明度を表現したい場合は透過PNGか、opacityを使用してください。
完全に透明色を指定したい場合はtransparentを使用できます。

/* 悪い例 */
background: url(../img/side_ttl.png) repeat-x scroll 0 0 rgba(0, 0, 0, 0);

/* 良い例 */
background: url(../img/side_ttl.png) repeat-x scroll 0 0 transparent;

全体のレイアウトに影響するスタイルを指定しないでください。

特定の箇所に適用させたいスタイルは、必ずセレクタを絞って指定してください。

/* 悪い例 */
h2 {
    height:40px;
}

/* 良い例 */
#header h2 {
    height:40px;
}