CSS、JS、HTMLのコードレビューガイドライン

CSS、JS、HTMLのレビューのためのガイドラインを作成するように依頼されました。JSのコーディングガイドラインがあることは知っていますが、HTMLとCSSについては何も知りません。JSをレビューするために、私は確かにそれらのガイドラインに従い、それらに言及します。しかし、CSSとHTMLはどうでしょうか？論理エラーやインデントの問題以外に、マークアップやCSSを確認するときに確認する必要がある具体的な事項はありますか？

いくつかの注意事項：

• 適切なHTMLタグを使用して構造化情報が識別されていますか？H1- H6見出し、UL/ OLおよびLIリストなど？
• 何のレガシーHTMLタグはありません（<b>、<i>、<center>、<font>）を使用？
• サイトは可能な限り最小限のマークアップを使用していますか？
• スタイル情報はCSSファイルに外部化されていますか？
• すべてのJavascriptは外部化されていますか？イベントハンドラーを含めますか？
• CSSクラス名は、img-captionフォーム（bold-red）またはコンテンツ（pink-elephant）ではなく、ページ（）内の関数を参照していますか？
• 画像は適切な形式（PNGまたはJPEG、種類によって）ですか？
• JavaScriptライブラリの最小化されたバージョンが使用されていますか？
• オプションで、ローカルで開発されたすべてのJavaScriptおよびCSSファイルが最小化されていますか？
• HTML / CSSは検証しますか？
• YSlow（または同様の）を使用してパフォーマンスをチェック/最適化しましたか？
• （ほとんど）[SEO] JavaScriptをオフにしてサイトにアクセスできますか？
• [SEO]最も関連性の高いコンテンツがHTMLの上部にありますか？

HTMLの優れたスタイルの重要な要素の1つは、段階的な拡張です。これは、CSSやJavaScriptがなくてもHTMLレイアウトが適切にレンダリングされることを意味します。次に、JS / CSSが処理されると、見栄えがよくなります（たとえば、古いスタイルのHTML <select>ドロップダウンがアニメーション化されます）。

これは、非侵入型マークアップにも関係しています。代わりに<font style="color:red;font-size:16pt">Hello</font>を使用します<div class="red-colored-big-fond">Hello</div>。

JavaScriptでも同じです。代わりに<button onclick="javascript:alert('a');">Clickme</button>、ボタンクラス/ IDを指定して、JavaScriptからターゲットを設定します。また、マークアップコードの保守が容易になります。

タスクの実行に使用されるマークアップの量が最小であることを確認します。マークアップもセマンティックであることを確認し、タグがまったく同じことを行い、より多くの情報を提供する場合は使用しないでください。スパンがブロック要素にされていないこと、およびその逆を検証します。

さらに、アレックスは遠回りの方法で大きなポイントをもたらします。「red-colored-big-font」のようなクラス名を使用していないことを確認してください。実際にデプロイされてから約20秒後に、誰かが小さな青いフォントに変更するためです。私は実際にこのCSSを見ました：

.arial12pt { font-family: Verdana; font-size: 8pt; }

マークアップのすべてが、ページの外観ではなく、ページの内容を説明している必要があります。プログレッシブエンハンスメントについては間違いなく同意しますが、これもまた遠回りです。このページでは、CSSを使用しない場合と同じように、CSSを使用した場合と同じように見える必要はありません。テーブルランドとspacer.gifに戻ってしまうので、同じに見えないようにしてください。

HTMLに関する限り、私は常にファイルに階層とインデントを設定するようにしています。たとえば、divがたくさんある場合：

<div id="content">
   <div id="post">
     <div class="title">
       Blah Blah Title
     </div>
   </div>
</div>

レイアウトやテンプレートを作成するほとんどの人にとってそれはかなり明白だと思いますが、多くの場合、構造化された階層を持たない文字化けしたHTMLを見るだけなので、他の人にとって読みにくくなっています。よりCSのバックグラウンドから来ていると思いますが、これは私の心に残ります。CSSについても同様です。あなたがdivをスタイリングしているとしましょう：

#whatever{
    background-image: url('blah.gif');
    color: #FFF000;
}

PHP / Ruby / Whateverなどの別の言語が混在している場合は、インデントを使用すると、すばやく読みやすくなります。繰り返しますが、それはあなたが最もうまく機能する方法に依存しますが、他の人が私のHTMLを読むとき、私はそれを本当に整理するのが好きです:)

また、上記のように、CSSクラスとIDにレイアウトに関連する名前を付けることは、特に（他の言語で変数やメソッドに名前を付けるのと同じように）毛むくじゃらになる場合に常に優れたアイデアです。他に注意すべきことは、マージン、パディング、その他の配置の問題の恐ろしい「推測とチェック」です。私がよく避けようとしているのは、マージンとパディングに負の数を入れることです。自分でレイアウトを作成しなかった場合や、後で戻って変更したい場合は、オーバーホールが必要になる可能性があります。私の意見では、見栄えが良いとしても、CSSで何の変哲もない「無愛想な」試みもしないことは常に良い考えです。CSSを再構成する必要がある場合でも、通常はより良い方法があります。

Javascriptの場合、私は常にJSLintで検証することを望んでいます。JSLintがキャッチする多くのバグを考えると、それを使用しないのはただおかしいだけです。

私はむしろ好きなこの標準文書に出くわしました。プログレッシブエンハンスメントについて言われたこともエコーします。一般に、他の誰かがHTML / CSSを作成する場合、後でその行を見ることができ、マークアップがいかに悪くないかに驚き、シンプルなスタイルの調整を簡単かつ効率的に行うことができるはずです。