柔軟で安定した高品質の HTML および CSS コード標準を作成するためのガイド

柔軟で安定した高品質の HTML および CSS コード標準を作成するためのガイド

黄金律
常に同じコーディング標準セットに従ってください。同じプロジェクトに何人の人が関わっているかに関係なく、すべてのコード行が同じ人によって書かれたように見えるようにしてください。

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

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

3. IE互換モード:
IE は、現在のページを表示するために使用する IE のバージョンを決定するための特定のタグをサポートしています。強い要件がない限り、IE がサポートする最新のモードを強制的に使用するには、エッジ モードに設定するのが最適です。

4. 文字エンコーディング:
文字エンコーディングを宣言することで、ブラウザがページ コンテンツをどのようにレンダリングするかを迅速かつ簡単に決定できるようになります。これにより、HTML で文字エンティティ タグを使用することがなくなり、すべてがドキュメントのエンコーディングと一致するようになります。

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

6. 実用性が重要:
HTML 標準とセマンティクスに従うようにしてください。ただし、使いやすさを犠牲にしないでください。常にタグを最小限にして、複雑さを最小限に抑えてください。

7. 属性の順序:
コードの読みやすさを確保するために、HTML 属性は次の順序で配置する必要があります。
1.クラス
2.id、名前
3.データ-*
4.src、for、type、href
5.タイトル、代替
6.アリア、役割
クラスは再利用性の高いコンポーネントをマークするために使用されるため、最初にランク付けする必要があります。

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

9. JavaScript によって生成されたタグ<br /> JavaScript によって生成されたタグは、コンテンツの検索や編集を困難にし、パフォーマンスに影響を及ぼします。可能であれば、使用を避けてください。

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

11. 申告命令:

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

1.配置(位置: 絶対; 上: 0; 下: 0; 右: 0; 左: 0; z-index: 100;);
2.ボックスモデル(display: block; float: left; width: 100px; height: 100px;);
3.typographic(フォント: normal 13px "Microsoft YaHei"; 行の高さ: 1.5em; 色: #333; テキストの位置合わせ:center;);
4.visual(背景: 黄色; 境界線: 1px 実線 #c00; 境界線の半径: 3px; 不透明度: 1; );

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

12. @importを使わない
タグと比較すると、@import ディレクティブははるかに遅く、余分なリクエストを追加するだけでなく、予期しない問題も引き起こします。いくつかの代替手段があります。
1. 複数の要素を使用する。
2. sass または less のような CSS プリプロセッサを使用して、複数の CSS ファイルを 1 つのファイルに変換します。
3. Rails、Jekyll またはその他のシステムを通じて CSS ファイルのマージ機能を提供します。

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

14. 接頭辞付きの属性:
ベンダー固有のプレフィックス付き属性を使用する場合は、各属性の値を垂直に揃えるようにロックすると、複数行の編集が容易になります。例:

CSSコードコンテンツをクリップボードにコピー
  1. .セレクタ {
  2.   
  3. -webkit-box-shadow: 0 1px   2px RGBA(0,0,0,.15);
  4.   
  5. ボックスシャドウ: 0 1px   2px RGBA(0,0,0,.15);
  6.   
  7. }
  8.   

15. 単一ルールの記述:
宣言が 1 つだけのスタイルの場合、読みやすく編集が速いように、ステートメントを同じ行に配置することをお勧めします。宣言が複数あるスタイルの場合も、宣言を複数行に分割する必要があります。これを行う際の重要な要素は、エラー検出です。たとえば、CSS バリデーターの 180 行目に構文エラーがあります。1 行で宣言が 1 つだけの場合、このエラーを無視することはできません。1 行で宣言が複数ある場合は、エラーを見逃さないように注意深く分析する必要があります。

16. Less と Sass でのネスト<br /> 不要なネストは避けてください。ネストは使用できますが、必ずしも使用すべきというわけではありません。ネストは、スタイルを親要素 (つまり、子孫セレクター) に限定する必要があり、ネストする必要がある要素が複数ある場合にのみ使用できます。

17. 注記:
コードは人間によって書かれ、管理されます。コードが自己記述的で、適切にコメントされ、他の人が理解しやすいものであることを確認してください。適切なコード コメントは、コードのコンテキストと目的を伝えます。
コンポーネント名やクラス名を単純に繰り返すのではなく、
長いコメントの場合は必ず完全な文章を書き、一般的なコメントの場合は簡潔なフレーズを書くようにしてください。

18. クラスの命名
クラス名には、カンマとダッシュのみを使用できます (アンダースコアやキャメルケースは使用できません)。ダッシュは、関連クラスの名前に使用する必要があります (.btn や .btn-danger などの名前空間と同様)。
過度に恣意的な省略は避けてください。.btn はボタンを表しますが、.s は何も意味しません。
クラス名はできる限り短く、明確な意味を持つ必要があります。
意味のある名前を使用し、表現的な名前ではなく、組織的または目的のある名前を使用します。
新しいクラスのプレフィックスとして最も近いクラスまたは基本クラスを使用します。
動作を識別するには (スタイルではなく) .js-* クラスを使用し、これらのクラスを CSS ファイルに含めないでください。
Sass および Less 変数に名前を付けるときにも、上記の仕様を参照できます。

19. セレクター<br />一般的な要素にはクラスを使用します。これにより、レンダリング パフォーマンスが最適化されます。
頻繁に表示されるコンポーネントには属性セレクター(例:[class^="···"])を使用しないでください。これらの要素によってブラウザのパフォーマンスが影響を受けるためです。
セレクターはできる限り短くする必要があり、セレクターを構成する要素の数は 3 以下に制限する必要があります。
必要な場合にのみ、クラスをその直接の親要素に制限します。

20. コードの構成:
コードセグメントをコンポーネントごとに整理します。
一貫した注釈規則を指定します。
一貫した空白を使用してコードをブロックに分割すると、大きなドキュメントをスキャンしやすくなります。
複数の CSS ファイルを使用する場合は、ページではなくコンポーネントごとに分割します。ページは再編成され、コンポーネントは移動されるだけだからです。

以上がこの記事の全内容です。標準化され、柔軟性があり、安定した、高品質な HTML および CSS コードの作成に役立つことを願っています。

原文: http://www.cnblogs.com/codinganytime/p/5258223.html

<<:  CSS最適化スキルの自己実践体験

>>:  WeChatアプレットは検索機能を実装し、検索結果ページにジャンプします

推薦する

Nginx のパラメータをオンにして Web パフォーマンスを 3 倍向上させる方法

1. 遭遇したいくつかの問題2008 年にパフォーマンス テストを行っていたとき、パフォーマンス テ...

jQueryはバウンドボールゲームを実装します

この記事では、バウンドボールゲームを実装するためのjQueryの具体的なコードを参考までに共有します...

Vue3のレスポンシブ原則の詳細な説明

目次Vue2 レスポンシブ原則のレビューVue3 レスポンシブ原則の分析ネストされたオブジェクトの応...

Dockerコンテナのインポ​​ートとエクスポートに関するチュートリアル

背景Docker の人気は、コンテナの共有と移植が容易であることと密接に関係しています。ユーザーは、...

MySQLの整数データ型tinyintの詳細な説明

目次1.1Tinyint型の説明1.2 練習環境の説明1.3 未署名属性の追加1.3.1 SQLモー...

Navicat for MySql ビジュアルインポート CSV ファイル

この記事では、参考までに、Navicat for MySql の CSV ファイルのビジュアルインポ...

Google の新しい UI から学べること (画像とテキスト)

2011 年に最も顕著なウェブサイトの変更は、一連の製品に新しいユーザー インターフェースを導入した...

jQuery ステップ進行軸プラグインの実装コード

毎日のjQueryプラグイン - ステップ進捗軸 ステップ進捗軸ツール系のサイトでは入門チュートリア...

この記事ではCSSボーダーの使い方を説明します

境界線のスタイルborder-style プロパティは、表示する境界線の種類を指定します。 bord...

Linux環境でglogログライブラリを使用する方法

Linuxライブラリを生成するLinux版はcentos7.3を使用し、コンパイルしてライブラリを生...

MySQL InnoDB ReplicaSet の簡単な紹介

目次01 InnoDBレプリカセットの紹介02 InnoDBレプリカセットの制限03 導入前に知って...

JS を使って CSS3 で丸い角を実装する方法

IE で CSS3 を使用して角を丸くする方法を探していたときに、例を見つけました。まだテストして...

適応的な幅と高さを持つ9つの正方形グリッドの背景画像の切り取りの分析

<br />幅と高さが適応するオリジナルの 9 グリッド レイアウトをベースに、ネットワ...

Linux における効果的なユーザー グループと初期ユーザー グループの実装

まず、/etc/group ファイルを確認します。 [root@localhost /]# cat ...

Vue+Bootstrapでシンプルな学生管理システムを実現

参考までに、vueとbootstrapを使って比較的シンプルな生徒管理システムを作りました。具体的な...