一度に完全なパッケージ化: エンジニアが最も必要とするフロントエンド開発ガイドの大幅な補足_html/css_WEB-ITnose

• HTML

セマンティクス

HTML5 は、コンテンツを正確に記述するために設計された多くのセマンティクス要素を提供します。豊富な語彙をぜひ活用してください。

使用している要素のセマンティクスを理解する必要があります。意味要素を間違った方法で使用することは、中立を保つことよりも悪いです。

シンプル

コードはシンプルにしてください。古い XHTML の習慣は忘れてください。

アクセシビリティ

アクセシビリティは後付けで考えるべきではありません。 Web サイトを改善するには、WCAG の専門家である必要はありません。次のようないくつかの小さな問題を修正することで、大きな違いを生むことができます。

1. alt 属性の正しい使用方法を学ぶ

2. リンクを確認するマークアップ (

は使用できません)

3. 情報を伝えるために色のみに依存しないでください

4. フォーム コントロールに明確にラベルを付けます

言語

言語と文字を定義するときエンコーディングはオプションです。HTTP ヘッダーですでに指定されている場合でも、ドキュメント レベルで両方を宣言することを常にお勧めします。他の文字エンコーディングよりも UTF-8 を優先します。

パフォーマンス

コンテンツの前にスクリプトをロードする正当な理由がない限り、ページのレンダリングをブロックしないでください。スタイルシートが重い場合は、最初に絶対に必要なスタイルを分離し、別のスタイルシートでの 2 番目の宣言の読み込みを延期します。 2 つの HTTP リクエストは 1 つよりも明らかに遅いですが、体感速度が最も重要な要素です。

• CSS

セミコロン

セミコロンは技術的には CSS の区切り文字ですが、常に終了文字として扱う必要があります。

• ボックス モデル

ボックス モデルはドキュメント全体で同じであることが望ましいです。 Global * { box-sizing: border-box; } は便利ですが、できる限りデフォルトのボックス モデルの特定の要素を変更しないでください。

• Flow

要素のデフォルトの動作は、できる限り変更しないでください。要素は可能な限り自然なドキュメント フロー内に保持されます。たとえば、デフォルトの表示を変更せずに画像の下のスペースを削除します。

同様に、要素のフローは、できる限り閉じないでください。

配置

CSS で要素を配置する方法はたくさんありますが、次のプロパティ/値を制限するようにしてください。優先順位:

セレクター

DOM に緊密に結合されているセレクターを最小限に抑えます。セレクターに 3 つを超える構造疑似クラス、子孫、または兄弟セレクターがある場合は、一致させる要素にクラスを追加することを検討してください。

必要のない場合は、セレクターのオーバーロードを避けてください。

具体性

値とセレクターをオーバーライドするのが難しくしないでください。 ID は慎重に使用し、! important は避けてください。

オーバーライド

スタイルをオーバーライドすると、セレクターとデバッグが困難になります。可能であれば、スタイルをオーバーライドすることは避けてください。

継承

継承できるスタイル宣言を繰り返さないでください。

シンプル

コードはシンプルにしてください。省略表現の属性を使用し、必要な場合を除き、複数の属性を使用しないでください。

言語

英語の表現は数式よりも優れています。

ブラウザ エンジンのヘッダー コード

古いブラウザ エンジンのヘッダー コードを断固として削除します。必要に応じて、標準プロパティの前に挿入できます。

アニメーション

ビューの遷移はアニメーションよりも優れています。不透明度と変換以外のプロパティをアニメーション化することは避けてください。

単位

可能な場合は単位のない値を使用してください。相対単位を使用する場合は、rem を使用します。ミリ秒よりも秒の方が優れています。

Color

透明度が必要な場合は、rgba を使用してください。また、常に 16 進形式を使用してください。

Painting

CSS を使用してリソースが簡単にコピーされる場合は、HTTP リクエストを避けてください。

ハック

ハックを使用しないでください。

• JavaScript

パフォーマンス

可読性、正確性、表現可能性はパフォーマンスよりも優先されます。基本的に JavaScript がパフォーマンスのボトルネックになることはありません。最適化ではなく、画像圧縮、ネットワーク アクセス、DOM の再配置。この記事の基本原則を 1 つだけ思い出せるとしたら、それは間違いなくこれでしょう。

ステートレス

関数をできるだけ純粋に保つようにしてください。理論上、すべての関数には副作用がなく、外部データを使用せず、既存のオブジェクトを変更する代わりに新しいオブジェクトを返します。

• ローカリゼーション

可能な限りネイティブ メソッドに依存します。

必須

強制が意味がある場合は、暗黙的な強制を使用します。それ以外の場合は強制は避けるべきです。

ループ

ループは変更可能なオブジェクトの使用を強制するため、使用しないでください。 array.prototype メソッドに依存します。

それを回避できない場合、または array.prototype メソッドが悪用されている場合は、再帰を使用してください。

ここには再帰を使いやすくするための一般的なループ関数があります。

Parameters

引数オブジェクトを忘れてください。多くの場合、残りのパラメーターの方が適切な選択となる理由は次のとおりです:

名前から関数に必要なパラメーターをよりよく理解できます

実数配列、使いやすい。

Apply

apply() は忘れてください。演算子を使用します。

Binding

もっと慣用的な方法がある場合は、bind() を使用しないでください。

関数のネスト

必要な場合を除き、関数をネストしないでください。

合成関数

複数の入れ子関数の呼び出しは避けてください。代わりに合成関数を使用してください。

キャッシュ

キャッシュ関数のテスト、大規模なデータ構造、および余分な操作。

変数

const は let よりも優れており、let は var よりも優れています。

Conditional

IIFE および return ステートメントは、if、else if、else および switch ステートメントよりも優れています。

オブジェクトの反復

可能であれば for…in は避けてください。

マップ オブジェクト

オブジェクトに正当な使用例がある場合、通常はマップの方が優れており、より強力な選択肢になります。

Curry

Curry は強力ではありますが、多くの開発者にとって異質なパラダイムです。状況的な使用例は非常に珍しいため、乱用しないでください。

可読性

一見巧妙なトリックでコードの意図を曖昧にしないでください。

コードの再利用

小さく、高度に構成可能で再利用可能な関数を作成することを恐れないでください。

依存関係

依存関係を最小限に抑えます。サードパーティとは、あなたが知らないコードです。簡単にコピーできるメソッドがいくつかあるからといって、ライブラリ全体をロードしないでください:

(この記事は「Mader Network」から転載されています、画像ソース: pbyrne CC Licensed、許可なく使用しないでください。)

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。