ホーム>Web デザインのチュートリアル>WEB標準化

Webフロントエンド開発仕様書（2014年版）

著者：Eve Cole 更新時間：2024-12-30 10:51:21

仕様

これは、フロントエンド開発チームが準拠し、合意したコード記述標準であり、コードの標準化と保守性を向上させることを目的としています。

基本原則

Web 標準、セマンティック HTML、構造、パフォーマンス、動作の分離、および優れた互換性への準拠。ページのパフォーマンスの観点から、コードは簡潔、明確、整然としており、サーバーの負荷を可能な限り軽減し、最速の解析速度。

一般仕様

1. プロトコルを無視（省略）します。background: url(http://www.google.com/images/example); のように記述します。特定のプロトコルを使用する必要がない限り、https プロトコルによる http 切り替えを容易にします。
2. IDE を使用して、書き込み時に明確なインデントを実現します。 Tab キーは 4 つのスペースに置き換えられます。

異なるシステムの編集ツールではタブの解釈が異なるため、Windows ではタブ キーは 4 つのスペースを占有しますが、Linux では 8 つのスペースを占有します (タブ キーの占有位置を自分で設定しない限り)。

たとえば、崇高なテキストでは、このツールでタブ キーを設定できます。

3. ラベル属性には小文字を使用します

4. 相違を防ぐため、末尾にスペースを残さないでください。

5. UTF-8 (BOM なし) を使用し、<meta charset="utf-8″> をドキュメントに追加します。

6. ファイル名には小文字の「.js」を使用し、「_」の代わりに「-」を推奨します。

7.TODO(contact) および TODO: アクションアイテム。@@ は使用しないでください。

HTML改良仕様
1. html5 <!DOCTYPE html>を使用する場合の仕様
2. <img> タグのデフォルト形式: src="" の問題を回避するための <img src="xxx.png" alt="default text" />
3. <a> タグのデフォルト形式: <a href="###" title="リンク名">xxx</> 注: target="_blank" は必要に応じて決定されます。
4. <a> タグは、### を使用してリンク プレースホルダーを予約します。参照: タグ プレースホルダーの問題
5. リンク アドレスを記述するときは、リダイレクトを避ける必要があります (例: href="http://itaolun.com/")。つまり、URL アドレスの後に「/」を追加する必要があります。
6. すべてのタグは XHTML 標準に従って閉じる必要があります。
7. タグの末尾には常に同じスラッシュの書き方を使用します。<br /> <hr /> 間のスペースに注意してください。
8. <b> <u> <i> などの古いタグの使用を避け、 <strong> <em> などに置き換えます。
9. data-xxx を使用して、次のようなカスタム データを追加します。<input data-xxx="yyy"/>
10. インライン スタイル シートでの style="xxx:xxx;" の特殊記号の使用を避け、参照 HTML 記号エンティティを使用します。
11. ラベルは、<p>Name: <input type="text" id="name" name="name" /></p> などの説明的なフォーム要素 (input、textarea) に追加する必要があります。</p> は次のように記述する必要があります。 : < p><label for=”name”>名前: </label><input type=”text” id=”name” /></p>

CSS改良仕様
1. 各スタイル属性の後に「;」を追加します。
便利な圧縮ツール「文章分割」。
2. クラスの名前付け。「-」[マイナス記号コネクタ] を使用してクラス内の文字を区切ります。
「-」で区切ると、キャメルケースを使用するよりも明確になります。
製品ライン-製品-モジュール-サブモジュール、名前を付けるときにこのメソッドを使用することもできます。
ID: CamelCase の命名法は次のとおりです。
名前トップボックスリストフッター著作権
3. スペースの使用には、次の規則が適用されます。

 .hotel-content { 
フォントの太さ: 太字; 
}

セレクターと { の前にはスペースが必要です。属性名の後にはスペースが必要です。属性名の後にスペースが必要です。前にスペースを追加する (禁止されている) 理由の 1 つは、第 2 に、IE 6 にはバグがあります。 . バグを突く。
4. (推奨) 属性の書き込み順序。例:

 .hotel-content {
     /* 位置*/
     表示: ブロック;
     位置: 絶対;
     左: 0;
     トップ: 0;
     /* ボックスモデル */
     幅: 50ピクセル;
     高さ: 50ピクセル;
     マージン: 10px;
     境界線: 1 ピクセルの黒一色。
     / *他の* /
     色: #efefef;
}

位置決めに関連する一般的なものには、表示位置の左上のフロートなどがあります。ボックス モデルに関連する一般的なものには、幅、高さ、マージン、パディング、境界線、およびその他の属性が含まれます。

この順序で記述すると、DOM をレンダリングする際のブラウザーのパフォーマンスが向上します。たとえば、Web ページ上の画像の幅と高さが設定されていない場合、画像がロードされる前は画像が占有するスペースは 0 ですが、ロードされた後はその画像が占有するスペースは 0 になります。 、 、0 の空間が突然引き伸ばされて、その下の要素が再配置されてレンダリングされ、再描画とリフローが発生します。 CSS を記述するときは、まず要素の位置をブラウザに伝え、その要素がテキスト フローの内側にあるか外側にあるか、そしてページ上のどこにあるかをブラウザに伝えます。スペースを占めるこれらの属性とその他の属性は、この固定領域内にレンダリングされます。これがほぼ意味します。
おすすめの記事：

投票結果: CSS プロパティをどのように並べますか?
http://www.mozilla.org/css/base/content.css
5. (推奨) 特定の HTML 構造のスタイルを記述する場合は、要素名 + クラス名を使用します。

 /* すべてのナビゲーションは ul 用に書かれています*/
ウルナビ {
     ...
}

「.a div」と「.a div.b」、なぜ後者の方が優れているのでしょうか?ニーズが変化し、「.a」の下に追加の div が追加された場合、最初のスタイルは後続の div に影響しますか?
6. (非推奨)ieでフィルターを使用、(禁止)式を使用
ここでの主な問題は効率です。特に注意して、CPU を消費するものを減らす必要があります。
7. CSS コメントは、単一行でコメントする場合は「/* */」で表され、注釈付きオブジェクトとその前後のコメント文字はそれぞれスペースを保持し、複数行でコメントする場合は開始コメントになります。文字と終了コメント文字はそれぞれ 1 行を占めます。例えば：

 /* コメントCSS */
/* 
テーブル {
    境界崩壊: 崩壊;
} 
*/

JS改良仕様

1.改行

コードの各行は 120 文字未満である必要があり、この数を超える場合は、行の最後に「.」または「+」などの演算子を置く必要があります。新しい行は、新しい行の前にさらに 1 レベルインデントする必要があります。

関数やメソッド内のパラメータが長い場合は、適切に分割する必要があります。

return キーワードと返される式の間の改行は禁止されています。例えば：

 // 実際に返されるのは 1 ではなく、未定義です
関数テスト() {
    戻る
        1;
}

2. コード行
1 行に複数の短いステートメントを記述すること、つまり 1 行に 1 つのステートメントのみを記述することは禁止されています。
if、for、do、while、switch、case、default、break、および continue などのステートメントは、それぞれ独自の行を占めます。
if、for、do、while などのループ本体および判定本体の実行文はすべて「{}」で囲む必要があり、中括弧は省略できません。例えば：

 // (i < 5) i += 1 の場合は誤りです。
 
// (i < 5) の場合は正しい {
    私 += 1
}

3. アライメント<br />コードブロックの区切り文字「{}」、「{」は前の行に続き、前にスペースで区切る、「}」は排他行を占有し、同じ列に配置する必要があります。それらを参照するステートメントは左揃えになります。
上記のインデント方法は、関数本体、クラスの定義、および if、for、do、while、switch、および case ステートメント内のプログラムの先頭で使用する必要があります。
4. スペース
キーワードを強調表示するには、キーワードの後に​​スペースが必要です。
関数名、メソッド名、および左括弧「(」の間にスペースを入れることはできません。次に例を示します。

 // 間違った関数 getInfo () {
    // コード
}
 
// 正しい関数 getInfo() {
    // コード
}

関数式を宣言する場合、関数と左括弧「(」の間にスペースを入れることはできません。次に例を示します。

 // 間違った var user = function () {
    // コード
}
 
// 正しい var user = function() {
    // コード
}

カンマの後にスペースを追加します。

代入演算子、比較演算子、算術演算子、論理演算子、ビット フィールド演算子 (「=」、「+= ">=、「<=」、「+」、「*」、「%」、「」など) &&"、"||" およびその他の二項演算子の前後にはスペースを入れる必要があります。

「!」、「~」、「++」、「--」、「&」(アドレス演算子) などの単項演算子の前後にスペースは入れません。

「.」と「[]」の前後にスペースは入れません。

5.空行

各クラス宣言の後と各関数定義の最後に空行を追加します。

関数本体内では、論理的に密接に関連するステートメントを空行で区切らず、その他の場所を空行で区切る必要があります。

6. 厳密な条件演算子を使用します。 == の代わりに === を使用し、!= の代わりに !== を使用します。

7. 余分なカンマは避けてください。例: var arr = [1,2,3,]

8. ステートメントは、function、if、switch、try、while を除き、すべてセミコロンで終わる必要があります。

9. 左中括弧を行末に、右中括弧を行頭に配置します。

10. new を使用して次のタイプのオブジェクトを構築することはお勧めできません: new Number、new String、new Boolean、new Object ({} で置き換え)、new Array ([] で置き換え)。

11. 配列メンバー間の「,」の後にスペースが必要です。

12. js/json で JavaScript の予約キーワードの名前付けを使用することは禁止されています。IE でエラーが発生しやすくなる可能性があります。キーワード (break、case、catch、 continue、default、delete、do、else、finally、for、function、if、in、instanceof、new、return、switch、this、throw、try、typeof、var、void、while 、 with)、キーワード (abstract、boolean、byte、char、class、con) st、デバッガー、ダブル、列挙、エクスポート、拡張、最終、浮動小数点数、goto、実装、インポート、int、インターフェイス、ロング、ネイティブ、パッケージ、プライベート、保護、パブリック、ショート、静的、スーパー、同期、スロー、一時的、揮発性）。

13. 改行コネクタとして「」の代わりに「+」を使用することをお勧めします。

14. プロンプト情報では、一般的な言語による説明を使用することは禁止されています。情報を表示する際に、エラーをすぐに特定できるようにする必要があります。たとえば、ユーザー情報にエラーを報告するよう求める場合は、「このユーザーは存在しません。 「バックグラウンドから返されたデータは正しくありません」ではなく、「ネットワーク タイムアウト」です。

関連記事