この記事は賞味期限切れです。（更新から1年が経過しています）

Top 10 best practices for front-end web developers

フロントエンドのWebデベロッパーの為の10の習慣だそうです。
出来ていない事もあったりするので自分のワークフローを再確認する意味でも。

以下、日本語による解釈。
和訳というより、超訳、もとい跳訳…？
読んで理解した部分だけかいつまんで書いてます。

1. どのDIV要素を閉じているのか記述しておく

div要素で汚くなったソースを読むのは大変。
どのdiv要素を閉じているのかをコメントしておけば浪費する時間の節約になります。

<div id="header">
    <div id="sub" class="first left">
    ...
    </div><!-- #sub.first.left -->
</div><!-- #header -->

2. CSSリセットを使う

各要素のリセットをしておく事で、
クロスブラウザによるレンダリングの差異を最小限に抑えられ、
CSSを記述する上でも大きな助けになるでしょう。
CSS Tools: Reset CSS

3. @importは使うべからず

link要素のみで埋め込むのに比べ、はるかに低速になるためです。
High Performance Web Sites :: don’t use @import

4. 画像を「Smush」せよ

最適化されていない画像を使う事は、ビジターの帯域を浪費する原因となります。
Smush.it™で簡単に画像を最適化してくれるので、これを活用するのも良いでしょう。

5. HTMLとCSSを混ぜるべからず

次の例は悪い例です。スタイル要素とHTMLは分離されているべきです。

<a href="http://www.catswhocode.com" style="background:#069;padding:3px;font-weight:bold;color:#fff;">Cats Who Code</a>

6. HTMLとJavaScriptを混ぜるべからず

次の例は悪い例です。JavaScriptとHTMLは分離されているべきです。
jQueryなどのフレームワークは、JavaScriptの分離に大きな助けになるでしょう。

<a id="cwc" href="http://www.catswhocode.com" onclick="alert('I love this site!');">Cats Who Code</a>

7. IEには条件分岐コメントで対処する

CSSハックは有用な場合もありますが、その多くはバグであり、ValidなCSSではなくなります。
IEに対応させるCSSを書く時は、条件分岐コメントを使いましょう。

<link href="style.css" rel="stylesheet" type="text/css" />
<!--[if lte IE 6]>
<link href="ie.css" rel="stylesheet" type="text/css"  />
<![endif]-->

8. JavaScriptファイルは最後に読み込む

（昔はhead要素内に記述するのが標準的でしたが）
JavaScriptファイルを読み込むscript要素は</body>の直前に記述すべきです。

9. 要素の意味を考えてマークアップすること

HTMLは文書構造を記述する為のマークアップ言語です。
その内容に相応しい要素を以て記述しましょう。

10. クロスブラウザを実現できるまでテストを重ねる

普段から複数ブラウザでの動作チェックを怠らないようにする事で、
結果的に効率化を図れるでしょう。

結構徹底出来てないケースもあったりするので、注意をせねば。
1.とかはやっていないな…。

---

2010/8/30

7も違う手法でやってるな…