同じプロジェクトに何人で取り組んでも、コードのすべての行が同じ人によって書かれたように見えるようにしてください。
1. タブの代わりに 2 つのスペースを使用します。これが、すべての環境で一貫した表示を保証する唯一の方法です。
2. ネストされた要素は 1 回インデントする必要があります (つまり 2 つのスペース)。
3. 属性の定義には必ず二重引用符を使用し、一重引用符は使用しないでください。
4. 自己終了要素の末尾にスラッシュを追加しないでください。HTML5 仕様では、これはオプションであると明確に述べられています。
5. オプションの終了タグを省略しないでください
<!DOCTYPE html> <html> <頭> <title>ページタイトル</title> </head> <本文> <img src="images/company-logo.png" alt="会社"> <h1 class="hello-world">こんにちは、世界!</h1> </body> </html>
すべてのブラウザで一貫した表示を確保するには、すべての HTML ページの最初の行に標準モード宣言を追加します。
<!DOCTYPE html> <html> <頭> </head> </html>
HTML5 仕様によれば、次のようになります。
ドキュメントに正しい言語を設定するには、HTML ルート要素の lang 属性を指定することを強くお勧めします。これは、音声合成ツールが使用すべき発音を決定したり、翻訳ツールが翻訳時に従うべきルールを決定したりするのに役立ちます。
<html lang="ja-jp"> <!-- ... --> </html>
IE は、現在のページの描画に使用する IE バージョンを決定するための特定のタグをサポートしています。強い特別なニーズがない限り、IE がサポートする最新モードを採用するように通知するには、エッジ モードに設定するのが最善です。
<meta http-equiv="X-UA 互換" content="IE=Edge">
文字エンコーディングを明示的に宣言することで、ブラウザーがページのコンテンツをどのようにレンダリングするかを迅速かつ簡単に決定できるようになります。この利点は、HTML で文字エンティティの使用を回避できるため、すべてがドキュメント エンコーディング (通常は UTF-8 エンコーディング) と一致することです。
<頭> <meta charset="UTF-8"> </head>
HTML5 仕様によれば、CSS ファイルと JavaScript ファイルを導入する場合、通常、type 属性を指定する必要はありません。これは、それぞれ text/css と text/javascript がデフォルト値であるためです。
<!-- 外部 CSS --> <リンク rel="スタイルシート" href="code-guide.css"> <!-- ドキュメント内 CSS --> <スタイル> /* ... */ </スタイル> <!-- JavaScript --> <script src="code-guide.js"></script>
HTML 標準とセマンティクスに従うように努めますが、実用性を犠牲にしないでください。使用するタグを最小限にし、複雑さを常に最小限に抑えるようにしてください。
コードを読みやすくするには、HTML 属性を以下の順序で配置する必要があります。
クラス
ID、名前
データ-*
src、for、type、href、value
タイトル、代替案
アリア*役
クラスは再利用性の高いコンポーネントを識別するために使用されるため、最初にリストする必要があります。 ID は特定のコンポーネントを識別するために使用され、注意して使用する必要があるため (ページ内のブックマークなど)、2 番目になります。
ブール型プロパティは値を指定せずに宣言できます。 XHTML 仕様では値を割り当てる必要がありますが、HTML5 仕様では必要ありません。
詳細については、ブール属性に関する WhatWG セクションを参照してください。
要素のブール属性に値がある場合は true、値がない場合は false です。
値を割り当てる必要がある場合は、WhatWG 仕様を参照してください。
属性が存在する場合、その値は空の文字列または属性の正規名 […] でなければならず、先頭または末尾の空白は含まれません。
簡単に言えば、値を割り当てる必要はありません。
HTML コードを記述するときは、冗長な親要素を避けるようにしてください。多くの場合、これを実現するには反復とリファクタリングが必要になります。次のケースを参照してください。
<!-- あまり良くありません --> <スパンクラス="アバター"> <img src="..."> </スパン> <!-- より良い --> <img class="アバター" src="...">
JavaScript を通じて生成されたタグにより、コンテンツの検索や編集が困難になり、パフォーマンスが低下します。できる限り避けてください。
1. タブの代わりに 2 つのスペースを使用します。これが、すべての環境で一貫した表示を保証する唯一の方法です。
2. セレクターをグループ化する場合は、個々のセレクターをそれぞれの行に配置します。
3. コードを読みやすくするために、各宣言ブロックの左中括弧の前にスペースを追加します。
4. 宣言ブロックの右中括弧は別の行に置く必要があります。
5. 各宣言文の: の後にスペースを挿入する必要があります。
6. より正確なエラー報告を行うには、各ステートメントを独自の行に配置する必要があります。
7. すべての宣言ステートメントはセミコロンで終わる必要があります。最後の宣言ステートメントの後のセミコロンはオプションですが、省略するとコードでエラーが発生しやすくなる可能性があります。
8. カンマで区切られた属性値の場合は、各カンマの後にスペースを挿入する必要があります (たとえば、box-shadow)。
9. rgb()、rgba()、hsl()、hsla()、またはrect()値内のカンマの後にスペースを挿入しないでください。これは、複数の色の値 (カンマのみ、スペースなし) を複数の属性値 (カンマとスペース) から区別するのに役立ちます。
10. 属性値または色のパラメータでは、1 未満の小数の先頭の 0 を省略します (たとえば、0.5 の代わりに .5、-0.5px の代わりに -.5px)。
11/16 進値はすべて小文字にする必要があります (例: #fff)。小文字は、その形が区別しやすいため、原稿をスキャンするときに読みやすくなります。
12. 短縮された 16 進値を使用してください。たとえば、#ffffff の代わりに #fff を使用します。
13. セレクター内の属性に二重引用符を追加します (例: input[type="text"])。場合によってはオプションですが、コードの一貫性を保つために二重引用符を使用することをお勧めします。
14. 0 の値に単位を指定することは避けてください。たとえば、margin: 0px; の代わりに margin: 0 を使用します。
/* 不正な CSS */
.selector、.selector-2次、.selector[type=text] {
パディング:15px;
マージン:0px 0px 15px;
背景色:rgba(0, 0, 0, 0.5);
box-shadow:0px 1px 2px #CCC、インセット 0 1px 0 #FFFFFF
}
/* 優れた CSS */
。セレクタ、
.selector-2次、
.selector[type="テキスト"] {
パディング: 15px;
マージン-ボトム: 15px;
背景色: rgba(0,0,0,.5);
ボックスシャドウ: 0 1px 2px #ccc、インセット 0 1px 0 #fff;
}関連するプロパティ宣言はグループ化して、次の順序で配置する必要があります。
位置決め
ボックスモデル
タイポグラフィー
ビジュアル
通常のドキュメント フローから要素が削除され、ボックス モデル関連のスタイルをオーバーライドできるため、位置決めが最初に行われます。ボックス モデルが 2 番目に来るのは、コンポーネントのサイズと配置が決定されるためです。
他のプロパティはコンポーネントの内部にのみ影響を与えるか、最初の 2 つのグループのプロパティには影響を及ぼさないため、後からランク付けされます。
.宣言順序 {
/* 位置決め */
位置: 絶対;
トップ: 0;
右: 0;
下: 0;
左: 0;
z インデックス: 100;
/* ボックスモデル */
表示: ブロック;
フロート: 右;
幅: 100ピクセル;
高さ: 100ピクセル;
/* タイポグラフィ */
フォント: 通常の 13 ピクセル「Helvetica Neue」、サンセリフ;
行の高さ: 1.5;
カラー: #333;
テキスト整列: 中央;
/* ビジュアル */
背景色: #f5f5f5;
ボーダー: 1px ソリッド #e5e5e5;
境界半径: 3px;
/* その他 */
不透明度: 1;
}タグと比較すると、@import ディレクティブは非常に遅いため、追加のリクエストの数が増加するだけでなく、予期しない問題が発生します。代替案には次のようなものがあります。
Sass または Less と同様の CSS プリプロセッサを介して、複数の CSS ファイルを 1 つのファイルにコンパイルします。CSS ファイルのマージ機能は、Rails、Jekyll、またはその他のシステムを通じて提供されます。
<!-- リンク要素を使用する -->
<リンク rel="スタイルシート" href="core.css">
<!-- @import は避けてください -->
<スタイル>
@import url("more.css");
</スタイル>メディア クエリを関連ルールのできるだけ近くに配置します。これらを単一のスタイル ファイルにパッケージしたり、ドキュメントの最後に配置したりしないでください。分けてしまえば、将来的には誰からも忘れられるだけです。典型的な例を以下に示します。
。要素 { ... }
.element-avatar { ... }
.element-selected { ... }
@media (最小幅: 480px) {
。要素 { ...}
.element-avatar { ... }
.element-selected { ... }
}ステートメントが 1 つだけ含まれるスタイルの場合は、読みやすくし、編集を迅速に行うために、ステートメントを同じ行に配置することをお勧めします。複数の宣言を持つスタイルの場合でも、宣言は複数の行に分割する必要があります。
これを行う際の重要な要素はエラー検出です。たとえば、CSS バリデーターは 183 行目に構文エラーがあることを示します。 1 行に 1 つのステートメントがある場合は、エラーを無視できません。1 行に複数のステートメントがある場合は、エラーを見逃さないように注意深く分析する必要があります。
/* 1 行に 1 つの宣言 */
.span1 { 幅: 60px }
.span2 { 幅: 140px }
.span3 { 幅: 220px }
/* 複数の宣言、1 行に 1 つ */
.スプライト {
表示: インラインブロック;
幅: 16px;
高さ: 15px;
背景画像: url(../img/sprite.png);
}
.icon {背景位置: 0 0;
.icon-home {背景位置: 0 -20px;
.icon-account { 背景位置: 0 -40px }すべての値を明示的に設定する必要がある場合は、省略表現のプロパティ宣言の使用を制限するようにしてください。短縮されたプロパティ宣言の一般的な悪用には、次のようなものがあります。
パディング
マージン
フォント
背景
国境
境界半径
ほとんどの場合、短縮プロパティ宣言にすべての値を指定する必要はありません。たとえば、HTML 見出し要素は上マージンと下マージンの値を設定するだけでよいため、必要な場合にこれら 2 つの値をオーバーライドするだけで済みます。省略表現のプロパティ宣言を過度に使用すると、コードが乱雑になる可能性があり、プロパティ値の不必要なオーバーライドを引き起こして、意図しない副作用が発生する可能性があります。
/* 悪い例 */
。要素 {
マージン: 0 0 10px;
背景: 赤;
背景: url("image.jpg");
境界半径: 3px 3px 0 0;
}
/* 良い例 */
。要素 {
マージン-ボトム: 10px;
背景色: 赤;
背景画像: url("image.jpg");
ボーダー左上の半径: 3px;
ボーダー右上半径: 3px;
}不必要なネストは避けてください。これは、ネストを使用することはできますが、必ずしも使用する必要があるわけではないためです。ネストは、スタイルを親要素 (つまり、子孫セレクター) に制限する必要があり、ネストする必要がある要素が複数ある場合にのみ使用します。
// ネストなし
.table > thead > tr > th { …
.table > thead > tr > td { …
// ネストあり
.table > thead > tr {
> 番目 { …
> td { …
}読みやすくするために、かっこで囲まれた数式の値、変数、演算子の間にスペースを追加します。
// 悪い例
。要素 {
マージン: 10px 0 @変数*2 10px;
}
// 良い例
。要素 {
マージン: 10px 0 (@variable * 2) 10px;
}コードは人によって書かれ、維持されます。コードが自己記述的で、十分なコメントがあり、他の人にとって理解しやすいものであることを確認してください。優れたコード コメントは、コードのコンテキストと目的を伝えます。コンポーネント名やクラス名を単純に言い直さないでください。
長いコメントの場合は、必ず完全な文を書いてください。一般的なコメントの場合は、簡潔なフレーズを書いてください。
/* 悪い例 */
/* モーダルヘッダー */
.modal-header {
...
}
/* 良い例 */
/* .modal-title および .modal-close の折り返し要素 */
.modal-header {
...
}1. クラス名には、小文字とダッシュ (アンダースコアやキャメルケースは不可) のみを使用できます。関連クラスの名前付けにはダッシュを使用する必要があります (名前空間と同様) (たとえば、.btn や .btn-danger)。
2. 過度に恣意的な略語は避けてください。 .btn はボタンを表しますが、.s は意味を表現できません。
3.クラス名はできるだけ短く、明確な意味を持たせる必要があります。
4. 意味のある名前を使用します。見せかけの名前ではなく、整理された、または目的を持った名前を使用してください。
5. 新しいクラスのプレフィックスとして、最も近い親クラスまたは基本クラスに基づきます。
6. .js-* クラスを使用して (スタイルではなく) 動作を識別し、これらのクラスを CSS ファイルに含めないでください。
/* 悪い例 */
.t { ... }
。赤 { ... }
.header { ... }
/* 良い例 */
.ツイート { ... }
。重要 { ... }
.tweet-header { ... }共通要素にクラスを使用すると、レンダリング パフォーマンスの最適化に役立ちます。
頻繁に発生するコンポーネントの場合は、属性セレクター ([class^=”…”] など) の使用を避けてください。ブラウザのパフォーマンスは、次の要因によって影響を受ける可能性があります。
セレクターはできるだけ短くする必要があり、セレクターを構成する要素の数を 3 つを超えないようにすることをお勧めします。
必要な場合にのみ、クラスを最も近い親要素 (つまり、子孫セレクター) に制限します (たとえば、接頭辞付きクラスを使用しない場合 - 接頭辞は名前空間のようなものです)。
/* 悪い例 */
スパン { ... }
.page-container #stream .stream-item .tweet .tweet-header .username { ... }
.アバター { ... }
/* 良い例 */
.アバター { ... }
.ツイートヘッダー .ユーザー名 { ... }
.ツイート .アバター { ... }一般的なコードの不一致や相違を回避するには、次のようにエディタを設定します。
タブ文字を置き換えるには 2 つのスペースを使用します (ソフトタブとは、タブ文字を表すためにスペースを使用することを意味します)。 ファイルを保存するときに、末尾の空白文字を削除します。 ファイルのエンコーディングを UTF-8 に設定します。 ファイルの末尾に空行を追加します。
ドキュメントを参照して、この構成情報をプロジェクトの .editorconfig ファイルに追加します。例: ブートストラップの .editorconfig インスタンス。詳細については、「EditorConfig」を参照してください。