Webフロントエンド開発仕様書(譲渡)_html/css_WEB-ITnose

本文处之：http://www.w3cfuns.com/blog-1-534.html

规范目的
为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发. 本文档如有不对或者不合适的地方请及时提出, 经讨论决定后方可更改.


基本准则
符合web标准, 语义化html, 结构表现行为分离, 兼容性优良. 页面性能方面, 代码要求简洁明了有序, 尽可能的减小服务器负载, 保证最快的解析速度.


文件规范
1. html, css, js, images文件均归档至<系统开发规范>约定的目录中;
2. html文件命名: 英文命名, 后缀.htm. 同时将对应界面稿放于同目录中, 若界面稿命名为中文, 请重命名与html文件同名, 以方便后端添加功能时查找对应页面;
3. css文件命名: 英文命名, 后缀.css. 共用base.css, 首页index.css, 其他页面依实际模块需求命名;
4. Js文件命名: 英文命名, 后缀.js. 共用common.js, 其他依实际模块需求命名.

html书写规范
1. 文档类型声明及编码: 统一为html5声明类型; 编码统一为, 书写时利用IDE实现层次分明的缩进;
2. 非特殊情况下样式文件必须外链至...之间;非特殊情况下JavaScript文件必须外链至页面底部;
3. 引入样式文件或JavaScript文件时, 须略去默认类型声明, 写法如下:




4. 引入JS库文件, 文件名须包含库名称及版本号及是否为压缩版, 比如jquery-1.4.1.min.js; 引入插件, 文件名格式为库名称+插件名称, 比如jQuery.cookie.js;

5. 所有编码均遵循xhtml标准, 标签 & 属性 & 属性命名 必须由小写字母及下划线数字组成, 且所有标签必须闭合, 包括 br (
), hr(

---

)等; 属性值必须用双引号包括;

6. 充分利用无兼容性问题的html自身标签, 比如span, em, strong, optgroup, label,等等; 需要为html元素添加自定义属性的时候, 首先要考虑下有没有默认的已有的合适标签去设置, 如果没有, 可以使用须以"data-"为前缀来添加自定义属性，避免使用"data:"等其他命名方式;

7. 语义化html, 如 标题根据重要性用h*(同一页面只能有一个h1), 段落标记用p, 列表用ul, 内联元素中不可嵌套块级元素;

8. 尽可能减少div嵌套, 如

欢迎访问XXX, 您的用户名是

用户名

完全可以用以下代码替代:

欢迎访问XXX, 您的用户名是用户名

;

9. 书写链接地址时, 必须避免重定向，例如：href="http://itaolun.com/", 即须在URL地址后面加上“/”；

10. 在页面中尽量避免使用style属性,即style="…";

11. 必须为含有描述性表单元素(input, textarea)添加label, 如

姓名:

须写成:

姓名:

12. 能以背景形式呈现的图片, 尽量写入css样式中;

13. 重要图片必须加上alt属性; 给重要的元素和截断的元素加上title;

14. 给区块代码及重要功能(比如循环)加上注释, 方便后台添加功能;

15. 特殊符号使用: 尽可能使用代码替代: 比如 <(<) & >(>) & 空格( ) & »(») 等等;

16. 书写页面过程中, 请考虑向后扩展性;

17. class & id 参见 css书写规范.


css书写规范
1. 编码统一为utf-8;

2. 协作开发及分工: i会根据各个模块, 同时根据页面相似程序, 事先写好大体框架文件, 分配给前端人员实现内部结构&表现&行为;  共用css文件base.css由i书写, 协作开发过程中, 每个页面请务必都要引入, 此文件包含reset及头部底部样式, 此文件不可随意修改;

3. class与id的使用: id是唯一的并是父级的, class是可以重复的并是子级的, 所以id仅使用在大的模块上, class可用在重复使用率高及子级中; id原则上都是由我分发框架文件时命名的, 为JavaScript预留钩子的除外;

4. 为JavaScript预留钩子的命名, 请以 js_ 起始, 比如: js_hide, js_show;

5. class与id命名: 大的框架命名比如header/footer/wrapper/left/right之类的在2中由i统一命名.其他样式名称由 小写英文 & 数字 & _ 来组合命名, 如i_comment, fontred, width200; 避免使用中文拼音, 尽量使用简易的单词组合; 总之, 命名要语义化, 简明化.

6. 规避class与id命名(此条重要, 若有不明白请及时与i沟通):
    a） 通过从属写法规避, 示例见d;
    b）取父级元素id/class命名部分命名, 示例见d;
    c）重复使用率高的命名, 请以自己代号加下划线起始, 比如i_clear;
    d）a,b两条, 适用于在2中已建好框架的页面, 如, 要在2中已建好框架的页面代码

中加入新的div元素,

按a命名法则:

...

,
样式写法:  #mainnav  .firstnav{.......}

按b命名法则:

...

,
スタイルの記述: .main_firstnav{....}

7. CSS 属性の記述順序は、レイアウト配置属性 -> 自己属性 -> テキスト属性 -> その他に従うことをお勧めします。この記事は自分の習慣に従って書くことができますが、同様の属性が一緒に書かれていることを確認してください。 属性の列挙: レイアウトの配置属性には主に次のものが含まれます: 表示、リストスタイル、位置 (対応する上、右、下、左)。独自の属性には主に次のものが含まれます: width、height、margin、padding、border、background。 テキスト属性には主に color、font、text-decoration、text-align、vertical-align、white が含まれます。 - スペース & その他& コンテンツ; 私がリストした属性は、最も一般的に使用されるものだけであり、すべてを表すものではありません

8. コードを作成する前に、スタイルの再利用性を考慮し、改善してください。コードの量を減らすための HTML 独自の属性とスタイル継承原則。例:

• これがタイトル リストです2010-09-15< ;/ul>
  定義
  ul.list li{position:相対} ul.list li spa{position:absolute; right:0}
  右側に日付を表​​示できます
  
  10.コーディングエラーが発生した場合、シートは文字化けを避けるためにUnicodeコードに変換する必要があります。
  
  11. httpリクエストを減らすために、背景画像には可能な限りスプライト技術を使用してください。
  
  12. table タグを使用する場合は (table タグの使用を避けるようにしてください)、幅/高さ/セル間隔/セルパディングなどのテーブル属性を直接定義して分離する必要があります。 thead、tr、th、td、tbody、tfoot、colgroup、scope などの構造とパフォーマンス (cellspaing と cellpadding の CSS 制御メソッド: table{border:0;margin:0;border-collapse:collapse;} table th 、table td{padding:0;}、base.css ファイルでテーブル スタイルを初期化します)
  
  13.< ;meta http-equiv="X-UA-Practical" content="IE=7" / の使用は避けてください。 > ie8 と互換性があります;
  
  14. png 画像を使用して写真を作成する場合、画像形式は png-8 形式である必要があります。png-8 が実際に画質に影響を与える場合や、半透明効果がある場合は、 Ie6 用に背景を個別に定義します:
  
  _background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (sizingMethod=crop, src='img/bg.png');
  
  15. text-shadow として ||
  
  16. Position:absolute などの属性の使用を減らす。コメントを適切な量に追加する。小さなブロック;
  
  18. コードのインデントと形式: 自分の習慣に従って単一行で記述することをお勧めします。
  
  
  JavaScript 記述基準
  
  1. utf-8 に統一されています。記述プロセスの後、コードの各行は原則としてセミコロンで終わる必要があります。インターネットからダウンロードされたコードによるコード汚染を避けるために、すべての関数は XXX プロジェクトのニーズに従ってネイティブに開発されます。冗長なコード|| 既存のコードと競合| ...);
  
  2. ライブラリの導入: サードパーティのライブラリを導入する必要がある場合は、協議して決定する必要があります。チームの他のメンバー;
  
  3. 変数の名前付け: キャメルケースの名前付け。ネイティブ JavaScript 変数の要件は、純粋な英語の文字であり、最初の文字は小文字である必要があります (iTaoLun など)。
  
  jQuery 変数の最初の文字は ' である必要があります。 _' などのルールはネイティブ JavaScript と同じです: _iTaoLun;
  
  さらに、グローバル変数を避けるために、変数は集中的な方法で宣言する必要があります。
  
  4. クラスの名前付け: 最初の文字を大文字にします。キャメルケース。例: ITaoLun;
  
  5. 関数の名前付け: iTaoLun();
  
  のように、最初の文字を小文字にして名前を付けます。
  
  7. eval_r() や innerText;
  
  など、互換性がなくリソースを消費するメソッドや属性の使用は避けてください。後の最適化では、JavaScript のコメント以外の漢字を Unicode エンコードに変換して使用する必要があります。コーディングエラーが発生します。
  
  9. コード構造を明確にし、関数の再利用を改善します。
  
  1.すべてのページ要素の画像は img フォルダーに配置され、テスト画像は
  
  フォルダーに配置されます。画像形式はすべて gif || png || に制限されます。 || 小文字の英字 || _ 中国語の文字を含めることはできません || 他のチームメンバーが理解しやすいように、最初と最後に名前を付けてください。 btn_submit.gif のように、アンダースコアで区切られた部分。
  
  4. 視覚効果を確保しながら、最小の画像形式と画質を選択します。
  
  5. 半透明の PNG 画像の使用は避けてください。使用する場合は、CSS 仕様を参照してください。関連手順);
  
  6. CSS スプライト テクノロジを使用して、ページの http リクエストを減らすために小さな背景画像やアイコンに焦点を当てますが、対応するスプライト PSD ソース画像に参照線を必ず描画してください。それを img ディレクトリに保存します。
  
  
  注釈仕様
  
  1. HTML コメント: コメント形式 、「--」はコメントの先頭と末尾にのみ使用でき、コメント テキスト領域には配置できません
  
  。 2. CSS コメント: コメント形式
  
  3. JavaScript コメント、単一行のコメントは '//これは単一行のコメントです'、複数行のコメントは
  
  
  の規約を使用します。 Aptana を使用することをお勧めします || Dw || 好みに応じて選択することもできますが、次の原則に従う必要があります:
  
  1. コードを「描画」するために IDE のビュー モードを使用しないでください。 . Dw で構築された関数 JS など、関連する関数コードを生成するために IDE を使用しないでください。
  
  コーディングは、インデントなどの形式にする必要があります。テスト ツール: FireFox & IE6 & IE7 & IE8 のみをテストします。開発の初期段階では Opera、Chrome、Safari を追加し、後の最適化中に Opera、Chrome、Safari を追加します。
  推奨されるテスト順序: FireFox-->IE7-->IE8--> ;IE6-->Opera-->Chrome--> ; Safari では、firebug および IE Tab Plus プラグインをインストールすることをお勧めします。
  
  
  その他の仕様
  
  1. 開発プロセス中、CSS の再利用効率を向上させるために厳密に分業に従ってページを完成させ、重複を避けます。開発;
  2. 冗長なコードを減らし、誰でも理解できるようにすることは、ユーザーのことを考え、サーバーのことを考慮することです。