柔軟で安定した高品質の HTML および CSS コード標準を作成するためのガイド

黄金律
常に同じコーディング標準セットに従ってください。同じプロジェクトに何人の人が関わっているかに関係なく、すべてのコード行が同じ人によって書かれたように見えるようにしてください。

1. 文法:
1. タブの代わりに 2 つのスペースを使用します。
2. ネストされた要素は 1 回インデントする必要があります (スペース 2 つ)。
3. 属性の定義には必ず二重引用符を使用し、一重引用符は使用しないでください。
4. 自己終了要素の末尾にスラッシュを追加しないでください。HTML5 仕様 (https://dev.w3.org/html5/spec-author-view/syntax.html#syntax-start-tag) では、これはオプションであると明確に規定されています。
5. オプションの終了タグを省略しないでください。
6. 各 HTML ページの最初の行に標準モード宣言を追加して、各ブラウザでページが表示されるようにします。

2. 言語属性:
HTML5 仕様によると、テキストの正しい言語を設定するには、HTML ルート要素に lang 属性を指定することが推奨されています。これにより、音声合成ツールが使用する発音を決定したり、翻訳ツールが翻訳時に従うルールを決定したりできるようになります。lang 属性のリスト: http://www.sitepoint.com/web-foundations/iso-2-letter-language-codes/

3. IE互換モード:
IE は、現在のページを表示するために使用する IE のバージョンを決定するための特定のタグをサポートしています。強い要件がない限り、IE がサポートする最新のモードを強制的に使用するには、エッジ モードに設定するのが最適です。

4. 文字エンコーディング:
文字エンコーディングを宣言することで、ブラウザがページ コンテンツをどのようにレンダリングするかを迅速かつ簡単に決定できるようになります。これにより、HTML で文字エンティティ タグを使用することがなくなり、すべてがドキュメントのエンコーディングと一致するようになります。

5. CSS および JavaScript ファイルをインポートします。
HTML5 仕様によれば、text/css と text/javascript がそれぞれデフォルト値であるため、通常、CSS ファイルと JavaScript ファイルをインポートするときに type 属性を指定する必要はありません。

6. 実用性が重要:
HTML 標準とセマンティクスに従うようにしてください。ただし、使いやすさを犠牲にしないでください。常にタグを最小限にして、複雑さを最小限に抑えてください。

7. 属性の順序:
コードの読みやすさを確保するために、HTML 属性は次の順序で配置する必要があります。
1.クラス
2.id、名前
3.データ-*
4.src、for、type、href
5.タイトル、代替
6.アリア、役割
クラスは再利用性の高いコンポーネントをマークするために使用されるため、最初にランク付けする必要があります。

8. タグの数を減らす<br />HTML コードを書くときは、冗長な親要素を避けるようにしてください。多くの場合、これを実現するには反復とリファクタリングが必要です。

9. JavaScript によって生成されたタグ<br /> JavaScript によって生成されたタグは、コンテンツの検索や編集を困難にし、パフォーマンスに影響を及ぼします。可能であれば、使用を避けてください。

10. CSS構文:
1. タブの代わりに 2 つのスペースを使用します。
2. セレクターをグループ化する場合は、各セレクターを独自の行に配置します。
3. コードを読みやすくするために、各宣言ブロックの左中括弧の前にスペースを追加します。
4. 宣言ブロックの閉じ中括弧は別の行に置く必要があります。
5. 各宣言文の後にスペースを挿入する必要があります。
6. より正確なエラー レポートを取得するには、各ステートメントを独自の行に記述する必要があります。
7. すべての宣言文はセミコロンで終わる必要があります。最後の宣言文の後のセミコロンはオプションですが、省略するとコードの印刷が簡単になります。
8. 属性値がカンマで区切られている場合は、各カンマの後にスペースを挿入する必要があります。
9. 属性値または色パラメータの場合、小数点が 1 未満の場合は先頭のゼロを省略します (例: 0.5 ではなく .5)。
10. 16 進数値はすべて小文字にする必要があります (例: #fff)。16 進数値は省略形を使用するようにしてください (例: #ffffff ではなく #fff を使用)。
11. 選択した属性に二重引用符を追加します。例: input[type="text"];
12. ゼロ値の単位を指定しないでください。たとえば、margin:0px ではなく margin:0 を使用します。

11. 申告命令:

関連するプロパティ宣言はグループ化され、次の順序で配置する必要があります。

1.配置(位置: 絶対; 上: 0; 下: 0; 右: 0; 左: 0; z-index: 100;);
2.ボックスモデル(display: block; float: left; width: 100px; height: 100px;);
3.typographic(フォント: normal 13px "Microsoft YaHei"; 行の高さ: 1.5em; 色: #333; テキストの位置合わせ:center;);
4.visual(背景: 黄色; 境界線: 1px 実線 #c00; 境界線の半径: 3px; 不透明度: 1; );

配置は、通常のドキュメント フローから要素を削除し、ボックス モデルに関連するスタイルをオーバーライドできるため、最初に配置されます。ボックス モデルは、コンポーネントのサイズと位置を決定するため、2 番目に配置されます。その他のプロパティは、コンポーネントの内部にのみ影響するか、最初の 2 つのプロパティ グループには影響しないため、後で配置されます。

12. @importを使わない
タグと比較すると、@import ディレクティブははるかに遅く、余分なリクエストを追加するだけでなく、予期しない問題も引き起こします。いくつかの代替手段があります。
1. 複数の要素を使用する。
2. sass または less のような CSS プリプロセッサを使用して、複数の CSS ファイルを 1 つのファイルに変換します。
3. Rails、Jekyll またはその他のシステムを通じて CSS ファイルのマージ機能を提供します。

13. メディアクエリの場所
メディア クエリは、関連するルールのできるだけ近くに配置します。メディア クエリを 1 つのスタイル シートにまとめたり、ドキュメントの下部に配置したりしないでください。

14. 接頭辞付きの属性:
ベンダー固有のプレフィックス付き属性を使用する場合は、各属性の値を垂直に揃えるようにロックすると、複数行の編集が容易になります。例:

15. 単一ルールの記述:
宣言が 1 つだけのスタイルの場合、読みやすく編集が速いように、ステートメントを同じ行に配置することをお勧めします。宣言が複数あるスタイルの場合も、宣言を複数行に分割する必要があります。これを行う際の重要な要素は、エラー検出です。たとえば、CSS バリデーターの 180 行目に構文エラーがあります。1 行で宣言が 1 つだけの場合、このエラーを無視することはできません。1 行で宣言が複数ある場合は、エラーを見逃さないように注意深く分析する必要があります。

16. Less と Sass でのネスト<br /> 不要なネストは避けてください。ネストは使用できますが、必ずしも使用すべきというわけではありません。ネストは、スタイルを親要素 (つまり、子孫セレクター) に限定する必要があり、ネストする必要がある要素が複数ある場合にのみ使用できます。

17. 注記:
コードは人間によって書かれ、管理されます。コードが自己記述的で、適切にコメントされ、他の人が理解しやすいものであることを確認してください。適切なコード コメントは、コードのコンテキストと目的を伝えます。
コンポーネント名やクラス名を単純に繰り返すのではなく、
長いコメントの場合は必ず完全な文章を書き、一般的なコメントの場合は簡潔なフレーズを書くようにしてください。

18. クラスの命名
クラス名には、カンマとダッシュのみを使用できます (アンダースコアやキャメルケースは使用できません)。ダッシュは、関連クラスの名前に使用する必要があります (.btn や .btn-danger などの名前空間と同様)。
過度に恣意的な省略は避けてください。.btn はボタンを表しますが、.s は何も意味しません。
クラス名はできる限り短く、明確な意味を持つ必要があります。
意味のある名前を使用し、表現的な名前ではなく、組織的または目的のある名前を使用します。
新しいクラスのプレフィックスとして最も近いクラスまたは基本クラスを使用します。
動作を識別するには (スタイルではなく) .js-* クラスを使用し、これらのクラスを CSS ファイルに含めないでください。
Sass および Less 変数に名前を付けるときにも、上記の仕様を参照できます。

19. セレクター<br />一般的な要素にはクラスを使用します。これにより、レンダリング パフォーマンスが最適化されます。
頻繁に表示されるコンポーネントには属性セレクター（例：[class^="···"]）を使用しないでください。これらの要素によってブラウザのパフォーマンスが影響を受けるためです。
セレクターはできる限り短くする必要があり、セレクターを構成する要素の数は 3 以下に制限する必要があります。
必要な場合にのみ、クラスをその直接の親要素に制限します。

20. コードの構成:
コードセグメントをコンポーネントごとに整理します。
一貫した注釈規則を指定します。
一貫した空白を使用してコードをブロックに分割すると、大きなドキュメントをスキャンしやすくなります。
複数の CSS ファイルを使用する場合は、ページではなくコンポーネントごとに分割します。ページは再編成され、コンポーネントは移動されるだけだからです。

以上がこの記事の全内容です。標準化され、柔軟性があり、安定した、高品質な HTML および CSS コードの作成に役立つことを願っています。

原文: http://www.cnblogs.com/codinganytime/p/5258223.html