[HTML,CSS,jQuery] 中々直らないイージーミス達

1プロジェクトに1回はやって、今後もまたやるであろうイージーミスを書いてみる
少しでも直ればいいと願って。

HTMLのidやclass属性に "#" や "." を含めて書いてしまい
CSSやjQueryの結果が反映されなくなるミス

誤ったHTML例:

<!-- id="foo" と書くべき -->
<div id="#foo"></div>

この状態で、CSSで #foo {} と書いたり
jQuery で $('#foo') と書いたりして、ハマること過去多数

誤ったCSS例:

.foo {
    font-size: 12px;
};
.bar {
    font-size: 15px;
}

末尾に ; (セミコロン) を付けて定義してしまい、次のスタイルが反映されなくなるミス

見つけにくいのは、上記の場合 .foo は有効で .bar だけが反映されなくなる点
また、もし後に新たなセレクタを書いたなら、それは有効になる

試しに .foo と .bar の順番を入れ替えてみて
「あれ？今度は.barが有効になった、なんだ優先順位の問題か」と
勘違いコンポへ派生する可能性もある

誤ったHTML例:

<!-- 本当は "10px" にしたかった -->
<div style="line-height:10;">
    <div>1行目</div>
    <div>2行目</div>
</div>

んで↓のようになってしまう

もし、各行の親ブロックが height指定をしている時は
overflow してしまい表示が消えているように見えることがある
display:none; とか visibility:hidden; とかを疑い始めると長くなるコース

これの厄介な点は2点有って
ひとつは、間違った指定ではないこと
そしてもうひとつは、jQueryを使った場合のこのパターン

$('<div />').css({
    fontSize: 12,
    lineHeight: 12 // '12px' と書く必要がある
});