• HTMLをテーブルレイアウトに使う場合、タグは“表示の指定”をするために使用される
• テーブルレイアウトの時にHTMLが行っていた表示指定は、Web標準ではCSSが行う
• HTMLをWeb標準に準拠して使う場合、タグは“構造を示す”に使われる

2.id及びclass名に見た目に関わる名前をつけない

個人的にはそんなに腹が立つわけじゃなくて、
class=”left”とかclass=”red”とかそういうclass名は素人くさい感じでほほえましいですが、
原則として、その要素の意味を表す名前をつけてあげるのが基本なので上記のようなものはだめということです。
僕もたまに怠けてclass=”clearfix”とか付けますけど、これは悪い見本です。

3.インデントは行わない方が無難

インデントをすると入れ子構造を把握できる代わりに、
ちゃんと入れ子構造通りにインデントをする義務が発生します。
Dreamweaverの機能で簡単に出来たりもしますが、
静的なページならまだしも、動的なページでは
PHPなどを利用してテンプレートを切るので構造がずれてしまったりという事があるのでだいたい左揃えの方が無難です。
まぁ、これは色々なケースがありますので無難とだけ。

4.CSSは作業終了後に見直して整理する

CSSに適切にコメントを入れると見やすくて良いのですが、
作業中はスピード重視でコメントをいちいち入れなかったり、
色々なセクションの記述がばらばらに書いてしまったりします。

こういうのはある程度仕方がないので、
作業終了の後、見直して適切なコンポーネントに分けたり、
コメントを挿入してあげるとメンテナンス性が向上します。

5.CSSはコンポーネント毎に複数に分けて記述する

いまや当たり前になったいわゆるコンポーネント化です。
CSSをある一定の役割毎に複数に分割して読み込む手法です。

運用体制など色々な事情から工夫して、切り分け方を考えると良いと思います。
こちらなど参考にしていただければと思います。
一枚で書くのが悪いって言う事ではないですが、
小分けにしておく方が管理はしやすいですよ。

6.CSSハックを使いすぎない

基本はクロスブラウザで書くことが無難です。
OperaやSafari用のハックはありますが、それらのモダンブラウザは殆どの場合ハックしなくても別の方法を採用すれば表示の体裁は保てると思います。
ハックはIE用のものだけにとどめておく事が良いでしょう。

7.HTMLタグで表示を調整しない

具体的にはスペースでインデントを調整したり、brタグの連続入力で余白を調整したりといった事。
タグにはひとつひとつに意味がありますので、それを考慮すればCSSで制御するのが良いという事です。

ですが、brの連続入力等は後でページ毎に修正しないといけないとかおおむね不便な事の方が多いので、
管理上の理由でもやめた方がよいです。

参考サイトSTOPON’ LISTEN

最低限これだけ守っていればコーディングがうまくなるポイントより

• ユーザはどんな動機や意向を持っているのか ？
• ユーザはそのインターフェイス上で、言葉やアイコンやジェスチャなど、どんな“ボキャブラリ”が使えると期待しているのか？
• アプリケーションはどうすればユーザに適切な期待をしてもらえるのか？

目標達成の手段

• 道具を用いる者には、それを使う為の理由がある。例えば以下のようなものだ。
• 調べ物をしたり探し物をしたい
• 何か学習したい
• 取引を実行したい
• 何かを制御または監視をしたい
• 何か創作したい
• 誰かと会話をしたい
• エンターテイメントを楽しみたい

インターフェイスデザインの初めの一歩は、そのユーザが本当に達成しようとしている目標が何なのか見極めること。

書籍：オライリージャパン「デザイニング・インターフェイス～パターンによるインタラクションデザイン」より抜粋