柔軟で安定した高品質のHTMLとCSSコード仕様の書き方ガイド

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

I. シンタックス
1. タブをスペース2個に置き換える。
2. 入れ子要素は1回インデント（空白2文字）する。　　
3. 属性定義には、必ず二重引用符を使用し、一重引用符は絶対に使用しないでください。　　
4. 自己完結型要素の末尾にスラッシュを付けない - HTML5 仕様 ( https://dev.w3.org/html5/spec-author-view/syntax.html#syntax-start-tag ) は、任意であることを明記しています。　
5. 5. オプションの終了タグを省略しないこと。
6. 各ブラウザで単一の表示ができるように、各 HTML ページの最初の行に標準スキーマ宣言を追加する。

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

III. IE互換モード。
IEは、現在のページに戻る際にどのバージョンのIEを使用するかを決定するための特定のタグをサポートしています。強く要求されない限り、エッジモードに設定し、IEがサポートする最新のモードに支配されるようにするのが最善です。

IV. 文字エンコーディング
文字エンコーディングを宣言することで、ブラウザがページの内容をどのように表示するかを迅速かつ容易に判断できるようになります。これにより、文書エンコーディングとすべて一致するHTMLの文字実体タグを使用する必要性を回避することができます。

V. cssとJavaScriptのファイルを導入する。
/{br HTML5の仕様では、cssとJavaScriptのファイルを導入する場合、それぞれtext/cssとtext/javascriptがデフォルト値となっているため、type属性を指定する必要はありません。

六、実用性こそ王道。　
/{br HTMLの標準とセマンティクスに従うよう心がける。ただし、ユーザビリティを犠牲にしてはならない。常に可能な限り少ないタグを使用し、複雑さを最小限に抑えること。

VII. 属性の順序
HTMLの属性は、コードの可読性を確保するために、次の順序で並べる必要があります。
1. クラス
2.ID、名前　　　　
3.data-*　　　　
4.src,for,type,hrefについて　　　　
5.タイトル、alt　　　　
6.アリア,ロール　　
クラスは、再利用性の高いコンポーネントをマークするために使用されるので、最初にリストアップする必要があります。

VIII. タグの数を減らす
/
HTMLコードを書くときは、冗長な親要素を避けるようにします。多くの場合、これには反復とリファクタリングが必要です。

IX. JavaScriptで生成されたタグ
JavaScriptで生成されたタグは、コンテンツを見つけにくくし、編集しにくくし、現場でのパフォーマンスを低下させます。できる限り避けてください。

X. CSSの構文。
1. タブをスペース2文字に置き換える。　　
2. セレクタをグループ化する場合は、個々のセレクタを別行動にする。　　
3. コードの可読性を高めるため、各宣言ブロックの左括弧の中にスペースを追加する。　　
4. 宣言ブロックの右括弧は別行動にする。　　
5. 各宣言文の : の後にスペースを挿入する。　　
6. より正確なエラー報告のために、各記述は別々の行にする必要があります。　　
7. すべての宣言はセミコロンで終わること。最後の宣言の後のセミコロンは任意であるが、セミコロンを省略するとコードが出やすくなる場合がある。　　
8. カンマで区切られたプロパティ値の場合、各カンマの後にスペースを挿入する必要があります。　　
9. 9. 属性値やカラーパラメータの場合、1以下の小数の前の0を省略する（例：0.5ではなく.5）。　　
10. 16進数値はすべて小文字とし、例えば#ffffの代わりに#fffのように、可能な限り16進数値の省略形を使用すること。　　
11. 11. 選択した属性に二重引用符を追加する 例：input[type="text"];　　
12. 例：margin:0pxではなく、margin:0を使用する。

xi. 順序を宣言する。

関連するプロパティの宣言はグループ化し、以下の順序で配置する。　　　

1.positioning(position: absolute; top: 0; bottom: 0; right: 0; left: 0; z-index: 100;)です。　　　
2.box model(display: block; float: left; width: 100px; height: 100px;);　　　
3.typographic(font: normal 13px "Microsoft YaHei"; line-height: 1.5em; color: #text-align:center;);　　　
4.visual(background: yellow; border: 1px solid #c00; border-radius: 3px; opacity: 1; );
位置決めは、通常のドキュメントフローから要素を取り除き、ボックスモデル関連のスタイルを上書きするため、1番目となります。ボックスモデルは、アセンブリのサイズと位置を決定するため、2位になっています。他の属性はアセンブリの内部に影響を与えるか、最初の 2 つの属性セットに影響を与えないので 2 番目になります。

XII. インポートを使用しない
タグと比較して、@importディレクティブは非常に遅く、追加のリクエストが増えるだけでなく、予測不可能な問題が発生することがあります。代替案は以下の通りです。
1. 複数の要素を使用する。　　　　　
2. sassやlessなどのcssプリプロセッサを使って、複数のcssファイルを1つのファイルにする。　　　　　
3. railsやjekyllなど、cssファイルのマージ機能を提供するシステムでcssファイルをマージする。

XIII. メディアクエリの場所
メディアクエリは、できるだけ関連するルールの近くに配置します。一つのスタイルファイルにまとめたり、ドキュメントの一番下に配置したりしないでください。

XIV. 接頭辞付き属性　
/{br ベンダー固有の属性を接頭辞付きで使用する場合、各属性の値は複数行の編集を容易にするためにロックして縦に並べます。たとえば　　　　

xv. 単一行ルール宣言 :
　　宣言が1つのスタイルでは、読みやすさと迅速な編集のために、同じ行に文を配置することが推奨されます。複数の宣言があるスタイルでは、やはり宣言は複数行に分けるべきである。このようにする重要な要因は、エラー検出のためである。例えば、cssチェッカーの180行目に構文エラーがあった場合、1行で1つの宣言であればエラーを無視することはありませんが、1行で複数の宣言であれば、エラーを見逃さないように慎重に解析しなければなりません。

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

XVII. コメント
コードは人によって書かれ、管理されます。あなたのコードは、自己記述的で、よくコメントされ、他の人が理解しやすいものであることを確認してください。良いコードのコメントは、文脈の関係やコードの目的を伝えるものです。
コンポーネント名やクラス名を単純に言い直さない。
長いコメントには完全な文章を、一般的なコメントには簡潔なフレーズを書くようにしてください。

クラス名
クラス名には小さな文字とダッシュのみを使用できます (アンダースコアやハンプの命名規則は使用できません)。ダッシュは、関連するクラスの命名に使用する必要があります (名前空間と同様です。例: .btn と .btn-danger)
過度に恣意的な略語は避ける。.btnはボタンの略ですが、.sは何の意味もありません。　　
クラス名はできるだけ短く、わかりやすくする。　　
表現力豊かな名前ではなく、意味のある名前、整理された名前、目的を持った名前を使用する。　　
新しいクラスのプレフィックスは、最新のクラスまたはベースクラスとする。　　
.js-*クラスを使用して（スタイルではなく）動作を識別し、これらのクラスをcssファイルに含めないでください。　　
また、sassやlessの変数名を付ける際にも、上記の仕様を参考にすることができます。

XIX. セレクタ
/
一般的な要素にクラスを使用することで、レンダリングパフォーマンスの最適化に適しています。　　
頻出する部品については、属性セレクタ（[class^="---"]など）の使用は、ブラウザの性能に影響するため、避けてください。　　
セレクタはできるだけ短くし、セレクタを構成する要素の数は3つ以内にするようにします。　　
必要な場合のみ、最も近い親要素にクラスを限定する。

XXです。コード構成 :
編成単位でのコードセグメントの編成　　
一貫したアノテーションの仕様を指定する。　　
コードをブロックに分けるために一貫した空白を使用することで、大きなドキュメントのスキャンを容易にすることができます。　　 {このため、大きな文書をスキャンしやすくなります。
複数のcssファイルを使用する場合、ページは再編成され、コンポーネントは移動するだけなので、ページではなくコンポーネントとして分割してください。

以上が今回の記事の全内容です。標準化された、柔軟で安定した、高品質のHTMLとCSSのコードを書くために、お役に立てれば幸いです。

元の記事 http://www.cnblogs.com/codinganytime/p/5258223.html