柔軟で安定した高品質の HTML および CSS コードを作成する方法

今回は、柔軟で安定した高品質な HTML と CSS コードの書き方と、柔軟で安定した高品質な HTML と CSS コードを書く際の 注意点 についてお届けします。実践的なケースを取り上げます。見てください。

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

1.構文:
1. タブ文字 (タブ) を置換するには 2 つのスペースを使用します。 2. ネストされた要素は必ず 1 つの引用符を使用してください。引用符;
4. HTML5 仕様 (https://dev.w3.org/html5/spec-author-view/syntax.html#syntax-start-tag) を終了要素に追加することは使用しないでください。これはオプションであることを示します。
5. オプションの終了タグを省略しないでください。
6. 各ブラウザで表示されるように、標準モード宣言を追加します。
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 仕様に従って、css および JavaScript ファイルを導入します。通常、text/css と text/javascript がそれぞれデフォルト値であるため、type 属性を指定する必要はありません。

6. 実用性は重要です:

HTML の標準とセマンティクスに従うようにしてください。ただし、使用するタグは最小限にして、複雑さを最小限に抑えてください。

HTML 属性は次のとおりです。コードの可読性を確保するために、
1.class

2.id,name

3 .data-*
4.src,for,type,href

5.title,alt

6.Aria の順序で配置する必要があります。 ,role
class は再利用性の高いコンポーネントをマークするために使用されるため、最初にランク付けする必要があります

8. タグの数を減らす HTML コードを記述するときは、多くの場合、反復とリファクタリングが必要になります。

9. JavaScript によって生成されたタグ
JavaScript によって生成されたタグは、コンテンツの検索と編集を困難にします。

10. タブ文字を置き換えるには、2 つのスペースを使用します。 (タブ);

2. セレクター

をグループ化する場合は、各宣言ブロックの左中括弧の間にスペースを追加します。宣言ブロックの右中括弧は別の行に置く必要があります。
5. 各宣言ステートメントの後にスペースを挿入する必要があります。 ;

7. すべての宣言ステートメントはセミコロンで終わる必要があり、最後の宣言ステートメントの後のセミコロンは省略可能ですが、このセミコロンを省略すると、コードがカンマで区切られて実行されやすくなります。 、各カンマの後にスペースを挿入する必要があります。

9. 属性値または色のパラメータの場合は、1 未満の小数点を省略します (たとえば、0.5 の代わりに .5)。例: #fff のように、省略された 16 進値を使用してください。たとえば、#ffffff の代わりに #fff を使用します。 input[type="text"] など。 12. margin:0px の代わりに margin:0 など、0 の値に単位を指定することは避けてください。

11. 宣言の順序:

関連 プロパティの宣言は、次の順序でグループ化して配置する必要があります。位置: 絶対; 上: 0; 左: 0; z-index: 100;); );
3.typographic(フォント: 通常 13px "Microsoft YaHei"; 行の高さ: 1.5em; カラー: #333; text-align:center;); 4.visual(背景: 黄色; 境界線: 1px 実線 # c00; border-radius: 3px; opacity: 1; );
配置により、通常のドキュメント フローから描画でき、ボックス モデルに関連するスタイルもオーバーライドできるため、ボックスが 1 番目にランクされます。モデルは、コンポーネントのサイズと位置を決定するため、2 番目にランクされます。他の属性の知識がコンポーネントの内部に影響を与えるため、または最初の 2 つの属性グループに影響を与えないため、後ろにランクされます。

12. @import を使用しないでください。
@import コマンドは、追加のリクエストの数が増えるだけでなく、予期せぬ問題を引き起こす可能性があります。
1. 複数の要素を使用します。
2. Sass 以下の CSS プリプロセッサを介して複数の CSS ファイルを 1 つのファイルに変換します。

13. メディア クエリ (メディア クエリ) として配置します。

14. プレフィックス付き属性: 製造元の特定のプレフィックス付き属性を使用する場合、各属性の値は揃えられます。

15. 単一行のルール宣言: 読みやすさと迅速な編集のために、複数の宣言を持つスタイルの場合は、ステートメントを同じ行に置くことをお勧めします。これを行う際の重要な要素は、たとえば、CSS バリデーターの 180 行目に
文法エラー

があります。それが 1 行に 1 つのステートメントである場合は、次のようになります。このエラーを無視しないでください。 1 行に複数のステートメントがある場合は、エラーを見逃さないように慎重に分析する必要があります。

不要なネストを使用することはできますが、ネストを使用する必要があるという意味ではありません。スタイルを親要素 (つまり
子孫セレクター) に制限する必要があり、ネストを使用する前に複数の要素をネストする必要がある場合にのみ使用します。注: コードは人によって記述され、保守されています。コードが自己記述的で、適切なコメントが付けられており、他の人にとって理解しやすいものであることを確認してください。

単純にコードを言い換えないでください。コンポーネント名またはクラス名。

長いコメントの場合は、必ず完全な文を記述してください。一般的なコメントの場合は、紹介文を記述してください。
8. クラスの名前付け クラス名には、小さな文字とダッシュのみを使用できます。キャメルケース)、関連するクラスの名前付けにはダッシュを使用する必要があります (.btn や .btn-danger などの

名前空間 と同様)

過度に恣意的な略語は避けてください。ただし、 .s は意味を表現できません。名前はできるだけ短く、明確な意味を持つ必要があります。
意味のある名前を使用し、整理された名前または明確な目的を持つ名前を使用します。
最新のクラスまたは基本クラスに基づいて新しいクラスに接頭辞を付けます。 ;
.js-* クラスを使用して (スタイルとは対照的に) 動作を識別し、これらのクラスを CSS ファイルに含めないでください。

sass およびless 変数に名前を付けるときに、上記の仕様を参照することもできます。 19. セレクター

共通の要素にはクラスを使用します。これはレンダリングのパフォーマンスの最適化に役立ちます。
頻繁に発生するコンポーネントの場合は、 属性選択の使用を避けてください (例: [class^="···"])。
セレクターはできるだけ短くし、セレクターを構成する要素の数を制限するようにしてください。 3 つを超えないようにすることをお勧めします。
クラスは最も近い親要素のみに制限してください。

20. コードの構成:
コンポーネント単位でコードセグメントを整理します。
一貫した空白を使用して分割します。これにより、複数の CSS ファイルのスキャンが容易になります。を使用する場合は、ページではなくコンポーネントに分割します。ページは再編成され、コンポーネントは移動されるだけです

信じられないかもしれませんが、これらの事例を読んだ後は、その方法を習得したことになります。さらに興味深い情報については、注意してください。 php 中国語 Web サイトの他の関連記事へ!

関連記事:
レスポンシブフレームワークでテーブルヘッダーの自動行折り返しに対処する方法

テーブルに境界線を表示させる方法

HTMLテーブルはどのようにレイアウトすべきか

以上が柔軟で安定した高品質の HTML および CSS コードを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。