[Web標準チュートリアル】html5+CSS3コーディング規約

2022-01-27 19:56:27

黄金律

何人が同じプロジェクトに参加しても、すべてのコードが同じ人によって書かれたように見えるようにすること。

シンタックス

1. タブを空白2文字に置き換える - これが、すべての環境で一貫した表示を確保する唯一の方法です。
2. ネストされた要素は1回インデントする（つまり空白2つ）。
3. 3. 属性の定義には、必ず二重引用符を使用し、一重引用符は使用しないでください。
4. HTML5仕様では、これはオプションであることを明確にしています。
5. オプションの終了タグを省略しない

<!DOCTYPE html>
<html>
  <head>
    <title>Page title</title>
  </head>
  <body>
    <img src="images/company-logo.png" alt="Company">
    <h1 class="hello-world">Hello, world!</h1>
  </body>
</html>

HTML5 doctype

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

<!DOCTYPE html>
<html>
  <head>
  </head>
</html>

言語属性

HTML5仕様による。
htmlのルート要素にlang属性を指定して、ドキュメントに正しい言語を設定することが強く推奨されます。これにより、音声合成ツールが使用すべき発音を決定したり、翻訳ツールが翻訳時に従うべき規則を決定したりするのに役立ちます。

<html lang="en-us">
  <! -- ... -->
</html>

IE互換モード

IEは、現在のページを描画するために使用すべきIEのバージョンを決定するための特定のタグをサポートしています。よほど特殊なニーズがない限り、エッジモードに設定して、IEに最新のサポートモードを通知するのがベストです。

<ブロッククオート

文字エンコーディング

文字エンコーディングを明示的に宣言することで、ブラウザはページのコンテンツがどのように表示されるかを迅速かつ容易に判断することができるようになります。これは、HTMLの文字実体タグの使用を避け、文書エンコーディング（通常はUTF-8エンコーディング）にすべて一致させることができるという利点もあります。

<head>
  <meta charset="UTF-8">
</head>

CSSファイル、JavaScriptファイルの紹介

HTML5の仕様では、CSSやJavaScriptのファイルを導入する場合、text/cssやtext/javascriptがそれぞれのデフォルトとなるため、type属性を指定する必要はないのが一般的です。

<! -- External CSS -->
<link rel="stylesheet" href="code-guide.css">

<! -- In-document CSS -->
<style>
  /* ... */
</style>

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

ユーティリティは王様

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

属性の順序

HTMLの属性は、コードの可読性を確保するために、以下に示す順序で記載する必要があります。

<ブロッククオート

クラス
id, name
data-*
src、for、type、href、value。
タイトル、alt
role, aria-*

classは再利用性の高いコンポーネントを識別するために使われるため、最初に来るようにします。 idは特定のコンポーネントを識別するために使われ、慎重に使用されるべきです（例：ページ内のブックマーク）ので、2番目に来るようにします。

boolean型属性

Boolean属性は値なしで宣言することができます。XHTML仕様では代入が必要ですが、HTML5仕様では代入は必要ありません。
詳細については、WhatWG の boolean 属性に関するセクションを参照してください。
要素のboolean属性は、値がある場合はtrue、ない場合はfalseとなります。
どうしても値を割り出したい場合は、WhatWGの仕様を参照してください。
属性が存在する場合、その値は空文字列か [...] 属性の正規名のいずれかでなければならず、最初と最後に空白を追加してはいけません。
簡単に言うと、値を割り当てる必要がないのです。

タグの数を減らす

HTMLコードを書くときは、冗長な親要素を避けるようにします。多くの場合、これを実現するためには、反復とリファクタリングが必要です。次のような例を考えてみましょう。

<! -- Not so great -->
<span class="avatar">
  <img src="... ">
</span>

<! -- Better -->
<img class="avatar" src="... ">

JavaScriptで生成されたタグ

JavaScriptで生成されたタグは、コンテンツを見つけにくくし、編集しにくくし、パフォーマンスを低下させます。できる限り避けるようにしましょう。

CSS構文

1. タブを空白2文字に置き換える - これが、すべての環境で一貫した表示を確保する唯一の方法です。
2. セレクタをグループ化する場合は、個々のセレクタを別行動にする。
3. 3. 読みやすくするために、各宣言ブロックの左括弧の前にスペースを入れてください。
4. 宣言ブロックの右括弧は別行動にする。
5. 各宣言文の:の後にスペースを挿入すること。
6. より正確なエラー報告を得るために、各ステートメントは別々の行にする必要があります。
7. すべての宣言文は、セミコロンで終わるようにします。最後の宣言文の後のセミコロンは任意ですが、セミコロンを省略するとコードがエラーになりやすいかもしれません。
8. 8. カンマで区切られたプロパティ値の場合、各カンマの後にスペースを挿入する（例：box-shadow）。
9. 9. rgb(), rgba(), hsl(), hsla(), rect() 値の内部では、カンマの後にスペースを挿入しないでください。これにより、複数の色値 (カンマのみ、スペースなし) と複数の属性値 (カンマとスペースの両方) を区別することが容易になります。
10. 属性値やカラーパラメータでは、1未満の小数点の前にある0を省略します（例：0.5の代わりに.5、-0.5pxの代わりに-.5px）。
11/ 16進数値は、#fffのようにすべて小文字にする。小文字はその形が判別しやすいため、文書をスキャンする際に区別しやすい。
12. 例えば、#ffffffの代わりに#fffのように、16進数の値を省略して使うようにする。
13. 13.セレクタの属性に二重引用符をつける（例：input[type="text"]）。これは場合によっては任意ですが、コードの一貫性を保つために、すべて二重引用符で囲むことをお勧めします。
14. 14. 0 の値に対して、margin: 0px; の代わりに margin: 0; のような単位を指定することは避ける。

/* Bad CSS */
.selector, .selector-secondary, .selector[type=text] {
  padding:15px;
  margin:0px 0px 15px;
  background-color:rgba(0, 0, 0, 0, 0.5);
  box-shadow:0px 1px 2px #CCC,inset 0 1px 0 #FFFFFF
}

/* Good CSS */
.selector,
.selector-secondary,
.selector[type="text"] {
  padding: 15px;
  margin-bottom: 15px;
  background-color: rgba(0,0,0,.5);
  box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
}

順序を宣言する

関連する属性の宣言はグループ化し、以下の順序で並べる必要があります。

位置付け
ボックスモデル
タイポグラフィ
ビジュアル

位置決めが最初に来るのは、通常のドキュメントフローから要素を取り除き、ボックスモデル関連のスタイルも上書きするためです。ボックスモデルは、コンポーネントのサイズと位置を決定するため、2番目に来る。
その他のプロパティは、コンポーネントの内側（inside）にしか影響しないか、最初の2つのプロパティセットに影響しないので、2番目に来ます。

.declaration-order {
  /* Positioning */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;

  /* Box-model */
  display: block;
  float: right;
  width: 100px;
  height: 100px;

  /* Typography */
  font: normal 13px "Helvetica Neue", sans-serif;
  line-height: 1.5;
  color: #333;
  text-align: center;

  /* Visual */
  background-color: #f5f5f5;
  border: 1px solid #e5e5e5;
  border-radius: 3px;

  /* Misc */
  opacity: 1;
}

インポートを使用しない

タグと比較して、@importディレクティブは非常に遅く、追加のリクエストが増えるだけでなく、予測不可能な問題が発生します。代替案としては、以下のようなものがあります。

複数の要素を使用する

SassやLessなどのCSSプリプロセッサで、複数のCSSファイルを1つのファイルにコンパイルする
RailsやJekyllなど、提供されているシステムによるCSSファイルマージ

<! -- Use link elements -->
<link rel="stylesheet" href="core.css">

<! -- Avoid @imports -->
<style>
  @import url("more.css");
</style>

メディアクエリの場所

メディアクエリは、できるだけ関連するルールの近くに配置します。1つのスタイルファイルにまとめたり、ドキュメントの一番下に置いたりしないでください。別々にすると、将来的に忘れ去られてしまうだけです。典型的な例を以下に挙げます。

.element { ... }
.element-avatar { ... }
.element-selected { ... }

@media (min-width: 480px) {
  .element { ...}
  .element-avatar { ... }
  .element-selected { ... }
}

一行ルール宣言

1つの宣言のみを含むスタイルでは、読みやすさと迅速な編集のために、文は同じ行にすることが推奨されます。複数の宣言を含むスタイルでは、やはり宣言を複数行に分割することが望ましい。

これを行う上で重要なのは、エラー検出のためです。例えば、CSSチェッカーは183行目にシンタックスエラーがあると表示します。これが1行で1つの宣言であれば、エラーを見逃すことはありませんが、1行で複数の宣言であれば、エラーを見逃さないように注意深く分析する必要があります。

/* Single declarations on one line */
.span1 { width: 60px; }
.span2 { width: 140px; }
.span3 { width: 220px; }

/* Multiple declarations, one per line */
.sprite {
  display: inline-block;
  width: 16px;
  height: 15px;
  background-image: url(... /img/sprite.png);
}
.icon { background-position: 0 0; }
.icon-home { background-position: 0 -20px; }
.icon-account { background-position: 0 -40px; }

プロパティ宣言の省略形

省略形のプロパティ宣言の使用は、表示上すべての値を設定する必要がある場合、できるだけ制限する必要があります。省略型プロパティ宣言のよくある悪用は、以下の通りです。

パディング
マージン
フォント
背景
ボーダー
ボーダーラディウス

ほとんどの場合、属性宣言の省略形に対してすべての値を指定する必要はない。例えば、HTMLのheading要素では、upper marginとlower marginの値だけを設定すればよいので、必要に応じてこの2つの値をオーバーライドすれば十分です。省略形の属性宣言を多用すると、コードが混乱したり、属性値を不必要に上書きして意図しない副作用が発生したりすることがあります。

/* Bad example */
.element {
  margin: 0 0 10px;
  background: red;
  background: url("image.jpg");
  border-radius: 3px 3px 0 0;
}

/* Good example */
.element {
  margin-bottom: 10px;
  background-color: red;
  background-image: url("image.jpg");
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}

LessとSassでネストされる

不必要なネストは避ける。ネストは使えるが、使うべきとは限らないからだ。ネストは、スタイルを親要素に制限する必要があり（つまり、子孫セレクタ）、ネストする必要がある要素が複数ある場合にのみ使用します。

// Without nesting
.table > thead > tr > th { ... }
.table > thead > tr > td { ... }

// With nesting
.table > thead > tr {
  > th { ... }
  > td { ... }
}

LessとSassの演算子

数式を構成する値、変数、演算子などの括弧の間には、読みやすさを向上させるためにスペースを入れてください。

// Bad example
.element {
  margin: 10px 0 @variable*2 10px;
}

// Good example
.element {
  margin: 10px 0 (@variable * 2) 10px;
}

コードは人によって書かれ、管理されます。あなたのコードが自己記述的で、よくコメントされ、他の人が理解しやすいものであることを確認してください。良いコードコメントは、文脈の関係やコードの目的を伝えるものです。単にコンポーネント名やクラス名を繰り返すだけではいけません。

長いコメントには完全な文章を、一般的なコメントには簡潔なフレーズを書くようにしましょう。

/* Bad example */
/* Modal header */
.modal-header {
  ...
modal-header { ... }

/* Good example */
/* Wrapping element for .modal-title and .modal-close */
.modal-header {
  ...
}

クラス名

1. クラス名には小文字とダッシュ（dashe）（アンダースコアやキャメルネームは不可）だけを使用する。ダッシュは、関連するクラスの命名（名前空間のようなもの）に使用されるべきです（例：.btn と .btn-danger）。
2. 過度に恣意的な略語は避ける。.btnはボタンの略ですが、.sは何の意味もありません。
3. クラス名はできるだけ短く、明確にすること。
4. 意味のある名称を使用する。体裁を整えた名前ではなく、整理された名前、または目的を持った名前を使う。
5. 5. 新しいクラスのプレフィックスは、最新の親クラスまたはベースクラスとする。
6. 6. .js-* クラスを使用して（スタイルではなく）動作を識別し、これらのクラスを CSS ファイルに含めないでください。

/* Bad example */
.t { ... }
.red { ... }
.header { ... }

/* Good example */
.tweet { ... }
.important { ... }
.tweet-header { ... }

セレクタ

レンダリングパフォーマンスを最適化した汎用要素用のクラスを使用します。
頻出する部品については、属性セレクタ（例：[class^="..."]）の使用は避けてください。ブラウザのパフォーマンスに影響を与える可能性があります。
セレクタはできるだけ短くし、セレクタを構成する要素の数は3つ以下にすることをお勧めします。
必要な場合のみ、クラスを最も近い親要素に限定する（つまり、子孫セレクタ）（例：プリフィックス付きのクラスを使用しない場合 - プリフィックスは名前空間に似ています）。

/* Bad example */
span { ... span { ... }
.page-container #stream .stream-item .tweet .tweet-header .username { ... }
.avatar { ... }

/* good example */
.avatar { ... }
.tweet-header .username { ... }
.tweet .avatar { ... }

エディタ設定

よくあるコードの不整合や矛盾を避けるために、エディタを以下のような設定にしてください。

タブ文字を空白2文字に置き換える（ソフトタブはタブ文字に空白を入れるという意味）。
ファイル保存時に末尾の空白を削除する。
ファイルエンコードをUTF-8に設定する。
ファイルの末尾に空白行を追加する。

ドキュメントを参照し、この設定情報をプロジェクトの.editorconfigファイルに追加してください。例 Bootstrapの.editorconfigインスタンス . 詳しくはエディタコンフィグについて .

より快適にお読みいただくために、こちらの記事もご覧ください。 https://www.jb51.net/shouce/codeguide/ .