標準化され、柔軟で、安定した、高品質な HTML および CSS コードを記述する方法_html/css_WEB-ITnose

黄金律

同じプロジェクトで何人が作業しても、常に同じコーディング標準に従ってください。コードのすべての行が同じ人によって書かれたように見えるようにしてください。

構文:

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

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

IE 互換モード:

IE は、現在のページで使用する必要がある IE バージョンを決定するための特定のタグの使用をサポートしています。強い要件がない限り、エッジ モードに設定するのが最善です。これにより、IE はサポートする最新のモードを採用するようになります。

文字エンコーディングを宣言することで、ブラウザーが迅速に対応できるようになります。これにより、HTML での文字エンティティ タグの使用が回避され、すべてがドキュメント エンコーディングと一致します。

HTML5 仕様によれば、次のようになります。通常、css ファイルと JavaScript ファイルを導入するときに type 属性を指定する必要はありません。これは、それぞれ text/css と text/javascript がデフォルト値であるためです。

HTML 標準とセマンティクスに従うようにしてください。実用性を犠牲にして、常に最小限のタグを使用し、複雑さを最小限に抑えるようにしてください。

属性の順序:

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

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

タグの数を減らす

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

JavaScript によって生成されたタグは、コンテンツの検索や編集を困難にし、パフォーマンスに影響を与えるため、可能であれば避けてください。

CSS 構文:

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

の代わりに margin :0 を使用します。

宣言順序:

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

1.positioning(position: ABSOLUTE; TOP: 0; BOTTOM : 0; 右: 0; 左: 0; z-index: 100;); 2.ボックスモデル(表示: ブロック; 高さ: 100ピクセル;); "Microsoft YaHei" ; line-height: 1.5em; color: #333; text-align:center;); 4.visual(背景: yellow; 境界線: 3px; 不透明度: 1; ); 位置決め (位置決め) により、通常のドキュメント フローから要素が削除され、ボックス モデルに関連するスタイルがオーバーライドされる可能性があるため、ボックス モデルはコンポーネントのサイズと位置を決定するため、2 番目にランクされます。属性の知識はコンポーネントの内部 (内部) に影響を与えるか、属性の最初の 2 つのグループに影響を与えないため、http://twitter.github.io/recess/

を参照してください。 @import は使用しないでください。

タグと比較すると、 @import ディレクティブははるかに遅く、追加のリクエストの数が増えるだけでなく、予測できない問題が発生します。

1. 複数の要素を使用します。 2. Sass を使用して CSS を事前に準備します。プロセッサは複数の CSS ファイルを 1 つのファイルとして扱います。 3. CSS ファイルのマージ機能は、rails、jekyll、またはその他のシステムを通じて提供されます。

メディア クエリの位置

メディア クエリを関連ルールのできるだけ近くに配置します。

プレフィックス付き属性:

プレフィックス付き属性を使用する場合。特定のメーカーの場合、各属性の値はロックによって垂直方向に整列され、複数行の編集が容易になります。 15);

box-shadow: 0 1px 2px rgba(0,0,0,.15); スタイルについては、読みやすさと編集のしやすさを考慮して、同じ行にステートメントを配置することをお勧めします。複数の宣言がある場合でも、宣言は複数の行に分割する必要があります。これを行う際の重要な要素は、たとえば、CSS 校正の 180 行目に構文エラーがあります。それが 1 つのステートメントの場合です。 1 行に複数のステートメントがある場合は、エラーを見逃さないように慎重に分析する必要があります。

これは、不要なネストを避けるためです。ネストは、ネストを使用する必要があるという意味ではありません。スタイルを親要素 (つまり、子孫セレクター) に制限する必要があり、ネストを使用するにはネストが必要な要素が複数ある場合にのみ使用します。コードが自己記述的で、適切なコメントが付けられ、他の人にとって理解しやすいものであることを確認してください。 コードのコンテキストと目的を伝えることができます。

コンポーネントやクラスを単純に説明しないでください。名前; 長いコメントの場合は必ず完全な文を記述し、一般的なコメントの場合は導入文を記述してください。

クラスの名前

クラス名 テキストには小さな文字とダッシュ (アンダースコアやキャメルケースは不可) のみを使用できます。過度に恣意的な略語を避けるために、関連するクラス名 (.btn や .btn-danger などの名前空間と同様) で使用する必要がありますが、 .s は可能な限り短くする必要があります。明確な意味を持ちます。意味のある名前を使用し、整理された目的のある名前を使用します。表現的な名前は使用しません。新しいクラスの接頭辞として .js-* クラスを使用します。 )、これらのクラスを CSS ファイルに含めないでください。 Sass および少ない変数の仕様に名前を付けるときに、上記の項目を参照することもできます。頻繁に発生するコンポーネントの場合は、属性セレクター (例: [class^="..."]) の使用を避けてください。ブラウザーのパフォーマンスはこれらの要因によって影響を受けます。セレクターはできるだけ短くし、属性セレクターの数を制限するようにしてください。セレクターを構成する要素は 3 つを超えないようにすることをお勧めします。

コードの構成:

一貫したコメント仕様を指定します。コードをブロックに分割すると、大きなドキュメントのスキャンが容易になります。 複数の CSS ファイルが使用されている場合は、コンポーネントに応じて分割します。これは、ページが再編成され、コンポーネントが移動されるだけであるため、ページ分割の一種ではありません。出典: http://www.css88.com/doc/codeguide/