基本原則
基本原則
構造、スタイル、動作の分離
ドキュメントとテンプレートには HTML 構造のみが含まれ、スタイルはスタイル シートに配置され、動作はスクリプトに配置されるようにしてください。 HTML 结构，样式都放到样式表里，行为都放到脚本里。
缩进
统一两个空格缩进（总之缩进统一即可），不要使用 Tab 或者 Tab、空格混搭。
文件编码
使用不带 BOM 的 UTF-8 编码。
- 在 HTML中指定编码
<meta charset="utf-8">； - 无需使用
@charset指定样式表的编码，它默认为UTF-8（参考 @charset）；
一律使用小写字母
<!-- Recommended --><img src="google.png" alt="Google"><!-- Not recommended --><A HREF="/">Home</A>
/* Recommended */color: #e5e5e5;/* Not recommended */color: #E5E5E5;
省略外链资源 URL 协议部分
省略外链资源（图片及其它媒体资源）URL 中的 http / https 协议，使 URL 成为相对地址，避免Mixed Content 问题，减小文件字节数。
其它协议（ftp 等）的 URL 不省略。
<!-- Recommended --><script src="//www.w3cschool.cn/statics/js/autotrack.js"></script><!-- Not recommended --><script src="http://www.w3cschool.cn/statics/js/autotrack.js"></script>
/* Recommended */.example { background: url(//www.google.com/images/example);
}/* Not recommended */.example { background: url(http://www.google.com/images/example);
}统一注释
通过配置编辑器，可以提供快捷键来输出一致认可的注释模式。
HTML 注释
模块注释
<!-- 文章列表列表模块 --><div class="article-list">...</div>
区块注释
<!-- @name: Drop Down Menu @description: Style of top bar drop down menu. @author: Ashu(Aaaaaashu@gmail.com) -->
CSS 注释
组件块和子组件块以及声明块之间使用一空行分隔，子组件块之间三空行分隔；
/* ==========================================================================
组件块
============================================================================ *//* 子组件块
============================================================================ */.selector { padding: 15px; margin-bottom: 15px;
}/* 子组件块
============================================================================ */.selector-secondary { display: block; /* 注释*/}.selector-three { display: span;
}JavaScript 注释
- 单行注释
必须独占一行。// 后跟一个空格，缩进与下一行被注释说明的代码一致。
- 多行注释
避免使用 /*...*/
- スペース2 つのインデントを統一し（要するにインデントを統一できる）、
TabやTabを使用せず、とスペースが混在しています。 - ファイル エンコーディング
BOMなしで UTF-8 エンコーディングを使用します。 HTML
<meta charset="utf-8"> でエンコーディングを指定します。@charset を使用して指定する必要はありません。スタイル シートのエンコーディング。デフォルトは UTF-8 です (@charset);/**
* 函数描述
*
* @param {string} p1 参数1的说明
* @param {string} p2 参数2的说明，比较长
* 那就换行了.
* @param {number=} p3 参数3的说明（可选）
* @return {Object} 返回值描述
*/function foo(p1, p2, p3) { var p3 = p3 || 10; return {
p1: p1,
p2: p2,
p3: p3
};
}/** * @fileoverview Description of file, its uses and information * about its dependencies. * @author user@meizu.com (Firstname Lastname) * Copyright 2015 Meizu Inc. All Rights Reserved. */外部リンクリソース URL のプロトコル部分を省略してください🎜🎜 URL 内の
http / https< を省略してください外部リンク リソース (画像やその他のメディア リソース) の /code> プロトコルを使用して URL を相対アドレスにし、混合コンテンツの問題とファイル サイズの削減 セクション番号。 🎜🎜他のプロトコルの URL (ftp など) は省略されません。 🎜rrreeerrreee🎜統一された注釈🎜🎜 エディターを設定することで、統一的に認識された注釈モードを出力するためのショートカット キーを提供できます。 🎜HTML コメント
🎜🎜🎜モジュール コメント🎜rrreee🎜🎜🎜ブロック コメント🎜rrreee🎜🎜CSS コメント
🎜コンポーネント ブロック、サブコンポーネント ブロック、宣言ブロックの間には空行を使用します。 、サブコンポーネント ブロックの間に 3 つの空白行。🎜rrreeeJavaScript コメント
🎜🎜単一行コメント🎜🎜🎜 は 1 行を占める必要があります。 // の後にはスペースが続き、インデントは次の行のコメント付きコードと一致します。 🎜🎜🎜複数行のコメント🎜🎜🎜 /*...*/ のような複数行のコメントの使用は避けてください。コメント内容が複数行ある場合は、複数の単一行コメントを使用します。 🎜🎜🎜関数/メソッドのアノテーション🎜🎜関数/メソッドのアノテーションには関数の説明が含まれている必要があり、パラメーターと戻り値がある場合はアノテーション識別子を使用する必要があります。 ;🎜🎜パラメータと戻り値の注釈には型情報と説明が含まれている必要があります;🎜🎜関数が内部関数であり、外部からアクセスできない場合は、 @inner フラグを使用できます;🎜🎜rrreee🎜🎜ファイルの注釈🎜🎜🎜ファイルの注釈は、このコードに精通している読者には、このファイルに何が含まれているかを伝えるために使用されます。 ファイルの一般的な内容、作成者、依存関係、および互換性情報を提供する必要があります。以下の通り:🎜rrreeeコード検証
- W3C HTML Validatorを使用して、HTML コードの有効性を検証します。
- CSS コードの有効性を検証するには、
コード検証が最終的な目的ではありません。この検証プロセスを何度も経て、開発者がどのような構文や記述方法が非標準であり、場合によっては非標準の記述方法を使用せざるを得なくなったとしても、深く理解できるようにすることが目的です。まだそれができます。
