柔軟で安定した高品質なHTML・CSSコード記述ガイド_HTML/Xhtml_Webページ制作

黄金律
何人で同じプロジェクトに取り組んでも、コードのすべての行が同じ人によって書かれたものであることを確認してください。

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

2. 言語属性:

HTML5 仕様によれば、テキストに正しい言語を設定するには、HTML ルート要素に lang 属性を指定することが推奨されます。合成ツールは、使用する言語を決定します。 の発音は、翻訳ツールが翻訳中に従うべきルールを決定するのに役立ちます。 lang 属性リスト: http://www.sitepoint.com/web-foundations/iso-2-letter -言語コード/
3. IE 互換モード:

IE は、レシートの現在のページで使用する IE バージョンを決定するための特定のタグの使用をサポートしています。強い要件がない限り、これを設定するのが最善です。したがって、IE はサポートする最新のモードを採用することになります。
4. 文字エンコーディング:

文字エンコーディングを宣言することで、ブラウザーがページ コンテンツのレンダリング方法を迅速かつ簡単に決定できるようになり、文字エンティティ タグの使用を回避できます。 HTML なので、すべてがドキュメントのエンコーディングと一致しています。
5. css および JavaScript ファイルをインポートします:

HTML5 仕様によれば、text/css および text/ であるため、css および JavaScript ファイルを導入する際に type 属性を指定する必要はありません。 javascript はそれぞれのデフォルト値です。
6. 実用性は重要です:

HTML の標準とセマンティクスに従うように努めますが、使用するタグは最小限にし、常に最小限の複雑さを維持するようにしてください。 7. 属性の順序:

コードの可読性を確保するために、HTML 属性は次の順序で配置する必要があります:

1.class2.id,name 3.data-*
4.src,for,type,href
5.title,alt
6.Aria,role
クラスは再利用性の高いコンポーネントをマークするために使用されるので、そもそもアレンジしました。


8. タグの数を減らす

HTML コードを記述するときは、多くの場合、反復とリファクタリングが必要になります。

9. JavaScript によって生成されたタグ
JavaScript によって生成されたタグは、コンテンツの検索と編集を困難にするため、できるだけ避けてください。

10. CSS 構文: 1. タブ文字 (タブ) を置き換えるには、個々のセレクターを 1 行に配置します。 🎜>3. コードを読みやすくするために、各宣言ブロックの左中括弧の間にスペースを追加します。
5. 宣言ブロックの右中括弧は別の行に置く必要があります。

6. より正確なエラー報告を得るために、各ステートメントはそれぞれセミコロンで終わる必要があります。ステートメントの後のセミコロンはオプションですが、このセミコロンを省略すると、コードが書きやすくなります。

8 コンマで区切られた属性値の場合は、各カンマの後にスペースを挿入する必要があります。値または色のパラメータでは、1 未満の小数点の前の 0 を省略します (たとえば、0.5 ではなく .5)。16 進値はすべて小文字にする必要があります。たとえば、#fff のようにします。省略形の 16 進形式の Base 値を使用します。たとえば、11 の代わりに #fff を使用します。12 など、選択した属性に二重引用符を追加します。値 0 の単位。たとえば、margin:0px の代わりに margin:0 を使用します。


11. 宣言順序:


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

1.positioning(位置: 絶対; 上: 0; 下: 0; 右: 0; 左: 0; z インデックス: 100;);
2. ボックス モデル(表示: ブロック; 浮動小数点: 左) ; 幅: 100px; 高さ: 100px;);
3.typographic(font: 通常 13px "Microsoft YaHei"; 行の高さ: 1.5em; color: #333; text-align:center;); 4.visual(background: yellow; border: 1px Solid #c00; border-radius: 3px; opacity: 1; );

要素は配置によって通常のドキュメント フローから削除できます。ボックス モデルは、コンポーネントのサイズと位置を決定するため、最初にランク付けされます。したがって、2 セットの属性が後ろにランクされます。

12. @import を使用しないでください
タグと比較して、@import コマンドは追加のリクエストの数が増加するだけでなく、予期しない問題を引き起こします。
1. 複数の要素を使用します。
2. sass またはそれ以下の CSS プリプロセッサを介して 1 つのファイルに変換します。
3. システムが提供するCSSファイル結合機能

13. メディア クエリの位置
メディア クエリを単一のスタイル ファイルにパッケージしたり、ドキュメントの下部に配置したりしないでください。

14. プレフィックス付き属性:
特定のメーカーのプレフィックス付き属性を使用する場合、複数行の編集で各属性の値をロックすると便利です。 :

CSS コードコンテンツをクリップボードにコピーします

1. .selector {
3. - webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15 );
5. box-shadow: 0 1px 2px rgba(0,0,0,.15); >
7. }

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

16. Less と Sass でのネスト ネストは使用できますが、次の場合にのみネストを使用する必要があるというわけではないためです。 style は親要素 (つまり、子孫セレクター) に限定する必要があり、複数の要素をネストする必要があります。

17. コメント: コードは人によって記述され、適切にコメントされており、他の人にとって理解しやすいものであることを確認してください。
コンポーネント名やクラス名を単純に言い換えないでください。
長いコメントの場合は、必ず完全な文を記述してください。一般的なコメントの場合は、導入文を記述してください。

18. クラスの名前付け クラス名には小さな文字とダッシュのみを使用できます (下線やキャメルケースは使用できません) ( などの名前空間と同様に) ダッシュを使用する必要があります。 btn および .btn-danger)
過度に恣意的な略語は避けてください。.btn はボタンを表しますが、.s は意味を表すことができません。
クラス名はできるだけ短く、明確な意味を持たせる必要があります。 、整理された名前または意図的な名前を使用し、表現的な名前を使用しないでください。
最新のクラスまたは基本クラスに基づいて新しいクラスに接頭辞を付けます。
動作を識別するために (スタイルではなく) .js-* クラスを使用します。これらのクラスを css ファイルに含めないでください。
sass およびless 変数に名前を付けるときに、上記の仕様を参照することもできます。

19. セレクター

レンダリング パフォーマンスの最適化に役立つクラスを使用します。頻繁に使用されるコンポーネントでは、属性セレクターの使用を避けてください。 ··"]))、ブラウザのパフォーマンスは次の要因によって影響されます。
セレクターをできるだけ短くし、セレクターを構成する要素の数を制限するようにしてください。3 を超えないようにすることをお勧めします。
Only 必要な場合にのみ、クラスを最も近い親要素に制限します。

20. コードの編成:

コンポーネント単位でコードセグメントを編成します。一貫した空白を使用してコードをブロックに分割します。ドキュメント;
複数の CSS ファイルを使用する場合は、ページではなくコンポーネントに分割します。これは、ページが再編成され、コンポーネントが移動されるだけであるためです。

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

原文:

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