HTML5+CSS3コーディング標準

黄金律

プロジェクトに何人の人が取り組んでいるかに関係なく、すべてのコード行が同じ人によって書かれたように見えるようにすることが重要です。

文法

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>
  </本文>
</html>

HTML5 ドキュメントタイプ

すべての HTML ページの最初の行に標準モード宣言を追加すると、すべてのブラウザーで一貫した表示が保証されます。

<!DOCTYPE html>
<html>
  <ヘッド>
  </head>
</html>

言語属性

HTML5 仕様によると:
ドキュメントの正しい言語を設定するには、ルート HTML 要素に lang 属性を指定することを強くお勧めします。これにより、音声合成ツールが使用すべき発音を決定したり、翻訳ツールが翻訳時に従うべきルールを決定したりできるようになります。

<html lang="ja">
  <!-- ... -->
</html>

IE互換モード

IE は、現在のページの描画に使用する IE のバージョンを決定するために特定のタグを使用することをサポートしています。特別な必要性がない限り、IE がサポートする最新のモードを使用するように通知するために、エッジモードに設定するのが最適です。

<meta http-equiv="X-UA-compatible" content="IE=Edge">

文字エンコーディング

文字エンコーディングを明示的に宣言することで、ブラウザがページコンテンツをどのようにレンダリングするかを迅速かつ簡単に決定できるようになります。これを行う利点は、HTML で文字エンティティタグを使用する必要がなくなり、すべてがドキュメントのエンコード (通常は UTF-8 エンコード) と一致することです。

<ヘッド>
  <メタ文字セット="UTF-8">
</head>

CSSおよびJavaScriptファイルをインポートする

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

<!-- 外部 CSS -->
<link rel="スタイルシート" href="コードガイド.css">

<!-- ドキュメント内 CSS -->
<スタイル>
  /* ... */
</スタイル>

<!-- JavaScript -->
<script src="code-guide.js"></script>

実用性が重要

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

属性順序

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

クラス
ID、名前
データ-*
src、for、タイプ、href、値
タイトル、代替
役割、アリア-*

クラスは再利用性の高いコンポーネントを識別するために使用されるため、最初に来る必要があります。 id は特定のコンポーネントを識別するために使用され、注意して使用する必要があるため (ページ内のブックマークなど)、2 番目に使用されます。

ブールプロパティ

ブール型プロパティは値なしで宣言できます。 XHTML 仕様では値を割り当てる必要がありますが、HTML5 仕様では必要ありません。
詳細については、ブール属性に関する WhatWG セクションを参照してください。
要素のブール属性は、値がある場合は true になり、値がない場合は false になります。
値を割り当てる必要がある場合は、WhatWG 仕様を参照してください。
属性が存在する場合、その値は空の文字列か、先頭または末尾に空白のない属性の正規名のいずれかである必要があります。
簡単に言えば、値を割り当てる必要はありません。

タグの数を減らす

HTML コードを書くときは、冗長な親要素を避けるようにしてください。これを実現するには、多くの場合、反復とリファクタリングが必要になります。次の例をご覧ください。

あまり良くない
<span class="アバター">
  <画像src="...">
</span>

<!-- より良い -->
<img class="アバター" src="...">

JavaScript で生成されたタグ

JavaScript 経由で生成されたタグにより、コンテンツの検索や編集が難しくなり、パフォーマンスが低下します。できる場合は避けてください。

CSS構文

1. タブの代わりに 2 つのスペースを使用します。これは、すべての環境で一貫した表示を確保する唯一の方法です。
2. セレクターをグループ化する場合は、各セレクターを独自の行に配置します。
3. コードを読みやすくするために、各宣言ブロックの開始中括弧の前にスペースを追加します。
4. 宣言ブロックの閉じ中括弧は別の行に置く必要があります。
5. 各宣言文の後にスペースを挿入する必要があります。
6. より正確なエラー報告を行うには、各ステートメントを独自の行に表示する必要があります。
7. すべての宣言文はセミコロンで終わる必要があります。最後の宣言の後のセミコロンはオプションですが、省略するとコードにエラーが発生しやすくなる可能性があります。
8. カンマで区切られたプロパティ値の場合、各カンマの後にスペースを挿入する必要があります（例：box-shadow）。
9. rgb()、rgba()、hsl()、hsla()、または rect() 値内のカンマの後にスペースを挿入しないでください。これにより、複数の色の値 (カンマあり、スペースなし) と複数の属性値 (カンマとスペースの両方を含む) を区別しやすくなります。
10. 属性値または色パラメータの場合、小数点が 1 未満の場合は先頭のゼロを省略します (たとえば、0.5 ではなく .5、-0.5px ではなく -.5px)。
11/16進数値はすべて小文字にする必要があります（例：#fff）。文書をスキャンする場合、小文字は形状が区別しやすいため、小文字の方が判別しやすくなります。
12. 16 進数値の短縮形 (#ffffff ではなく #fff) を使用するようにします。
13. セレクター内の属性に二重引用符を追加します。例: input[type="text"]。特定の場合にのみオプションですが、コードの一貫性を保つために、常に二重引用符を使用することをお勧めします。
14. ゼロ値の単位を指定しないでください。たとえば、margin: 0px; ではなく margin: 0; を使用します。

/* 不正な CSS */
.selector、.selector-secondary、.selector[type=text] {
  パディング:15px;
  マージン:0px 0px 15px;
  背景色:rgba(0, 0, 0, 0.5);
  ボックスシャドウ:0px 1px 2px #CCC、インセット 0 1px 0 #FFFFFF
}

/* 良い CSS */
。セレクタ、
.セレクタセカンダリ、
.セレクタ[type="text"] {
  パディング: 15px;
  下部マージン: 15px;
  背景色: rgba(0,0,0,.5);
  ボックスシャドウ: 0 1px 2px #ccc、インセット 0 1px 0 #fff;
}

宣言命令

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

ポジショニング
ボックスモデル
印刷物
ビジュアル

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

.宣言順序 {
  /* 位置決め */
  位置: 絶対;
  上: 0;
  右: 0;
  下部: 0;
  左: 0;
  zインデックス: 100;

  /* ボックスモデル */
  表示: ブロック;
  フロート: 右;
  幅: 100ピクセル;
  高さ: 100px;

  /* タイポグラフィ */
  フォント: 通常の 13px「Helvetica Neue」、サンセリフ体。
  行の高さ: 1.5;
  色: #333;
  テキスト配置: 中央;

  /* ビジュアル */
  背景色: #f5f5f5;
  境界線: 1px 実線 #e5e5e5;
  境界線の半径: 3px;

  /* その他 */
  不透明度: 1;
}

@import は使用しないでください

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

複数の要素を使用する

Sass や Less などの CSS プリプロセッサを使用して、複数の CSS ファイルを 1 つのファイルにコンパイルします。Rails、Jekyll、または CSS ファイルのマージ機能を提供するその他のシステムを使用します。

<!-- リンク要素を使用する -->
<link rel="スタイルシート" href="core.css">

<!-- @imports を避ける -->
<スタイル>
  @import url("more.css");
</スタイル>

メディアクエリの場所

メディアクエリを関連するルールのできるだけ近くに配置します。これらを 1 つのスタイルシートにまとめたり、ドキュメントの下部に配置したりしないでください。分離すると、将来忘れ去られてしまいます。典型的な例を以下に示します。

。要素 { ... }
.element-アバター { ... }
.element-selected { ... }

@media (最小幅: 480px) {
  。要素 { ...}
  .element-アバター { ... }
  .element-selected { ... }
}

1行ルール宣言

宣言が 1 つだけ含まれるスタイルの場合、読みやすさと編集のしやすさを考慮して、ステートメントを 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;
}

Less と Sass でのネスト

不必要なネストを避けてください。ネストできるからといって、必ずしもネストすべきというわけではないからです。スタイルを親要素 (子孫セレクターとも呼ばれます) に制限する必要がある場合、およびネストする必要がある要素が複数ある場合にのみ、ネストを使用します。

// ネストなし
.table > thead > tr > th { … }
.table > thead > tr > td { … }

// ネストあり
.table > thead > tr {
  > 番目 { … }
  > td { … }
}

Less と Sass の演算子

読みやすさを向上させるには、括弧で囲まれた数式内の値、変数、演算子の間にスペースを追加します。

// 悪い例
。要素 {
  マージン: 10px 0 @変数*2 10px;
}

// 良い例
。要素 {
  マージン: 10px 0 (@変数 * 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 { ... }
。重要 { ... }
.tweet-header { ... }

セレクタ

共通要素にクラスを使用すると、レンダリングパフォーマンスが最適化されます。
頻繁に出現するコンポーネントには属性セレクター (例: [class^="..."]) を使用しないでください。ブラウザのパフォーマンスはこれらの要因によって影響を受けます。
セレクターはできる限り短くする必要があり、セレクターを構成する要素の数は 3 以下に制限する必要があります。
必要な場合（つまり、プレフィックス付きのクラスを使用しない場合。プレフィックスは名前空間のようなものです）にのみ、クラスを最も近い親（つまり、子孫セレクター）に制限します。

/* 悪い例 */
スパン { ... }
.page-container #stream .stream-item .tweet .tweet-header .username { ... }
.アバター { ... }

/* 良い例 */
.アバター { ... }
.tweet-header .username { ... }
.tweet .avatar { ... }