web-dev-qa-db-ja.com

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

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

javascripthtmlcode-reviewscss
9
Kumar

探すべきいくつかの事柄：

  • 適切な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の上部にありますか？
5
Jaap

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からターゲットを設定します。また、マークアップコードの保守が容易になります。

0
alexwriteshere

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

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

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

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

0
Bryan Boettcher

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を再構築する必要がある場合でも、通常はより良い方法があります！

0
Patrick Canella

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

0
Zachary K

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

0
Jimmy Sawczuk