web前端能开发规范

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

基本准则
符合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声明类型<!DOCTYPE html>; 编码统一为<meta charset="gbk" />, 书写时利用IDE实现层次分明的缩进;
2. 非特殊情况下样式文件必须外链至<head>…</head>之间;非特殊情况下JavaScript文件必须外链至页面底部;
3. 引入样式文件或JavaScript文件时, 须略去默认类型声明, 写法如下:
<link rel="stylesheet" href="…" />
<style>…</style>
<script src="…"></script>

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

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

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

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

8. 尽可能减少div嵌套, 如<div class="box"><div class="welcome">欢迎访问XXX, 您的用户名是<div class="name">用户名</div></div></div>完全可以用以下代码替代: <div class="box"><p>欢迎访问XXX, 您的用户名是<span>用户名</span></p></div>;

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

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

11. 必须为含有描述性表单元素(input, textarea)添加label, 如<p>姓名: <input type="text" id="name" name="name" /></p>须写成:<p><label for="name">姓名: </label><input type="text" id="name" /></p>

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

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

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

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

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 id="mainnav"></div>中加入新的div元素,

按a命名法则: <div id="mainnav"><div class="firstnav">…</div></div>,
样式写法:  #mainnav  .firstnav{…….}

按b命名法则: <div id="mainnav"><div class="main_firstnav">…</div></div>,
样式写法:  .main_firstnav{…….}

7. css属性书写顺序, 建议遵循:  布局定位属性–>自身属性–>文本属性–>其他属性. 此条可根据自身习惯书写, 但尽量保证同类属性写在一起. 属性列举: 布局定位属性主要包括: display & list-style & position（相应的 top,right,bottom,left） ＆ float & clear ＆ visibility ＆ overflow； 自身属性主要包括: width & height & margin & padding & border & background; 文本属性主要包括：color & font & text-decoration & text-align & vertical-align & white- space & 其他 & content; 我所列出的这些属性只是最常用到的, 并不代表全部;

8. 书写代码前, 考虑并提高样式重复使用率;

9. 充分利用html自身属性及样式继承原理减少代码量, 比如:
<ul class="list"><li>这儿是标题列表<span>2010-09- 15</span></ul>
定义
ul.list li{position:relative}  ul.list li span{position:absolute; right:0}
即可实现日期居右显示

10. 样式表中中文字体名, 请务必转码成unicode码, 以避免编码错误时乱码;

11. 背景图片请尽可能使用sprite技术, 减小http请求, 考虑到多人协作开发, sprite按模块制作;

12. 使用table标签时(尽量避免使用table标签), 请不要用width/ height/cellspacing/cellpadding等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-Compatible" 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 || css3的相关属性;

16. 减少使用影响性能的属性, 比如position:absolute || float ;

17. 必须为大区块样式添加注释, 小区块适量注释;

18. 代码缩进与格式: 建议单行书写, 可根据自身习惯, 后期优化i会统一处理;

JavaScript书写规范

1. 文件编码统一为utf-8, 书写过程过, 每行代码结束必须有分号; 原则上所有功能均根据XXX项目需求原生开发, 以避免网上down下来的代码造成的代码污染(沉冗代码 || 与现有代码冲突 || …);

2. 库引入: 原则上仅引入jQuery库, 若需引入第三方库, 须与团队其他人员讨论决定;

3. 变量命名: 驼峰式命名. 原生JavaScript变量要求是纯英文字母, 首字母须小写, 如iTaoLun;

jQuery变量要求首字符为'_', 其他与原生JavaScript 规则相同, 如: _iTaoLun;

另, 要求变量集中声明, 避免全局变量.

4. 类命名: 首字母大写, 驼峰式命名. 如 ITaoLun;

5. 函数命名: 首字母小写驼峰式命名. 如iTaoLun();

6. 命名语义化, 尽可能利用英文单词或其缩写;

7. 尽量避免使用存在兼容性及消耗资源的方法或属性, 比如eval_r() & innerText;

8. 后期优化中, JavaScript非注释类中文字符须转换成unicode编码使用, 以避免编码错误时乱码显示;

9. 代码结构明了, 加适量注释. 提高函数重用率;

10. 注重与html分离, 减小reflow, 注重性能.

图片规范

1. 所有页面元素类图片均放入img文件夹, 测试用图片放于img/demoimg文件夹;

2. 图片格式仅限于gif || png || jpg;

3. 命名全部用小写英文字母 || 数字 || _ 的组合，其中不得包含汉字 || 空格 || 特殊字符；尽量用易懂的词汇, 便于团队其他成员理解; 另, 命名分头尾两部分, 用下划线隔开, 比如ad_left01.gif || btn_submit.gif;

4. 在保证视觉效果的情况下选择最小的图片格式与图片质量, 以减少加载时间;

5. 尽量避免使用半透明的png图片(若使用, 请参考css规范相关说明);

6. 运用css sprite技术集中小的背景图或图标, 减小页面http请求, 但注意, 请务必在对应的sprite psd源图中划参考线, 并保存至img目录下.

注释规范

1. html注释: 注释格式 <!–这儿是注释–>, '–'只能在注释的始末位置,不可置入注释文字区域;

2. css注释: 注释格式 ;

3. JavaScript注释, 单行注释使用'//这儿是单行注释' ,多行注释使用 ;

开发及测试工具约定

建议使用Aptana || Dw || Vim , 亦可根据自己喜好选择, 但须遵循如下原则:

1. 不可利用IDE的视图模式'画'代码;

2. 不可利用IDE生成相关功能代码, 比如Dw内置的一些功能js;

3. 编码必须格式化, 比如缩进;

测试工具: 前期开发仅测试FireFox & IE6 & IE7 & IE8 , 后期优化时加入Opera & Chrome & Safari;
建议测试顺序: FireFox–>IE7–>IE8–>IE6–>Opera–>Chrome–>Safari, 建议安装firebug及IE Tab Plus插件.

其他规范

1. 开发过程中严格按分工完成页面, 以提高css复用率, 避免重复开发;
2. 减小沉冗代码, 书写所有人都可以看的懂的代码. 简洁易懂是一种美德. 为用户着想, 为服务器着想

 

 

人人网web开发规范

浏览器特效支持规范

为了页面性能考虑，如果浏览器不支持CSS3相关属性的，则该浏览器的某些特效将不再支持，属性的支持情况如下表所示：

  圆角 阴影 动画 文字阴影 透明 背景渐变 空间变换
Chrome5+ Y Y Y Y Y Y Y
Firefox 4+ Y Y Y Y Y Y Y
Safari 5+ Y Y Y Y Y Y Y
Opera Y Y Y Y Y N Y
IE9+ Y Y N N Y N Y
Chrome5- N N Y Y Y Y Y
Firefox 4- N N N Y Y N N
Safari5- N Y Y Y Y N Y
IE8 N N N N N N N
IE7 N N N N N N N
IE6 N N N N N N N

[说明] Y为支持，N为不支持。

 

文件相关规范

  1. 1、文件名必须由小写字母、数字、中划线-组成
  2. 2、文件必须用utf-8编码
  3. 3、文件引入可通过外联或内联方式引入：
    1. 3.1 外联方式：<link rel=”stylesheet” href=”…” />（类型声明type=”text/css”可以忽略）
    2. 3.2 内联方式：<style>…</style> （类型声明type=”text/css”可以忽略）
  5. 4、原则上，不允许在html上直接写样式
  6. 5、link和style标签都应该放入head中

注释规范

  1. 1、文件顶部注释（推荐使用）
    1
    2
    3
    4
    5
    /*
    * @description: xxxxx中文说明
    * @author: zhifu.wang
    * @update: zhifu.wang (2012-10-17 18:32)
    */
  2. 2、模块注释（推荐使用）
    1
    2
    3
    /* module: module1 by zhifu.wang */
    …
    /* module: module2 by zhifu.wang */

    模块注释必须单独写在一行

  3. 3、简单注释
    1. 3.1 单行注释
      1
      /* this is a short comment */

      单行注释可以写在单独一行，也可以写在行尾

    2. 3.2 多行注释
      1
      2
      3
      4
      /*
      * this is comment line 1.
      * this is comment line 2.
      */

      多行注释必须写在单独行内

  4. 4、特殊注释（推荐使用）
    1
    2
    /* TODO: xxxx by zhifu.wang 2012-10-18 18:32 */
    /* BUGFIX: xxxx by zhifu.wang 2012-10-18 18:32 */

    用于标注修改、待办等信息

  5. 5、长度要求：注释中的每一行长度不超过40个汉字，或者80个英文字符

排版规范

  1. 1、一个tab设置为四个空格宽度。
  2. 2、规则可以写成单行，或者多行，但是整个文件内的规则排版必须统一。如果是在html中写内联的css，则必须写成单行。
  3. 3、单行形式书写风格的排版约束
    1. 3.1 每一条规则的大括号 { 前后加空格
    2. 3.2 多个selector共用一个样式集，则多个selector必须写成多行形式
    3. 3.3 每一条规则结束的大括号 } 前加空格
    4. 3.4 属性名冒号之前不加空格，冒号之后加空格
    5. 3.5 每一个属性值后必须添加分号; 并且分号后空格
    6. 例如：
      1
      2
      3
      div.test { width: 100px; height: 200px; }
      a:focus,
      a:hover { position: relative; right: 1px; }
  5. 4、多行形式书写风格的排版约束
    1. 4.1 每一条规则的大括号 { 前添加空格
    2. 4.2 多个selector共用一个样式集，则多个selector必须写成多行形式
    3. 4.3 每一条规则结束的大括号 } 必须与规则选择器的第一个字符对齐
    4. 4.4 属性名冒号之前不加空格，冒号之后加空格
    5. 4.5 属性值之后添加分号;
  7. 5、其他规范
    1. 5.1 使用单引号，不允许使用双引号
    2. 5.2 如果使用CSS3的属性，如果有必要加入浏览器前缀，则按照
    3. 1
      -webkit- / -moz- / -ms- / -o- / std
    4. 的顺序进行添加，标准属性写在最后，并且属性名称要对齐，例如：
      1
      2
      3
      4
      5
      6
      div.animation-demo {
      -webkit-animation: mymove 5s infinite;
      -moz-animation: mymove 5s infinite;
      -o-animation: mymove 5s infinite;
      animation: mymove 5s infinite;
      }

规则书写规范

除16进制颜色和字体设置外，CSS文件中的所有的代码都应该小写。

规则书写规范

  1. 1、规则命名中，一律采用小写加中划线的方式，不允许使用大写字母或 _
  2. 2、命名避免使用中文拼音，应该采用更简明有语义的英文单词进行组合
  3. 3、命名注意缩写，但是不能盲目缩写，具体请参见常用的CSS命名规则
  4. 4、不允许通过1、2、3等序号进行命名
  5. 5、避免class与id重名
  6. 6、id用于标识模块或页面的某一个父容器区域，名称必须唯一，不要随意新建id
  7. 7、class用于标识某一个类型的对象，命名必须言简意赅。
  8. 8、尽可能提高代码模块的复用，样式尽量用组合的方式
  9. 9、规则名称中不应该包含颜色（red/blue）、定位（left/right）等与具体显示效果相关的信息。应该用意义命名，而不是样式显示结果命名。例如：
    1
    2
    .red { color: red }（错误）
    .important-news { color : red }（正确）
  10. 10、除了重置浏览器默认样式外，禁止直接为html tag添加css样式设置，例如：
    1
    2
    3
    4
    div {
    width: 200px;
    font-size: 16px;
    }
  11. 11、每一条规则应该确保选择器唯一，禁止直接为全局.nav/.header/.body等类设置属性

属性编写顺序

推荐的样式编写顺序

    1. 1、显示属性
      1
      display/list-style/position/float/clear
    2. 2、自身属性（盒模型）
      1
      width/height/margin/padding/border
    3. 3、背景
      1
      background
    4. 4、行高
      1
      line-height
    5. 5、文本属性
1
2
color/font/text-decoration/text-align/
text-indent/vertical-align/white-space/content
  1. 6、其他
    1
    cursor/z-index/zoom
  2. 7、CSS3属性
    1
    transform/transition/animation/box-shadow/border-radius
  3. 8、链接的样式请严格按照如下顺序添加：
    1
    a:link -> a:visited -> a:hover -> a:active（LoVeHAte）

性能优化

  1. 1、合并margin、padding、border的-left/-top/-right/-bottom的设置，尽量使用短名称。
  2. 2、选择器应该在满足功能的基础上尽量简短，减少选择器嵌套，查询消耗。但是一定要避免覆盖全局样式设置。
  3. 3、注意选择器的性能，不要使用低性能的选择器，例如：
    1
    2
    3
    div > * {}
    ul > li > a {}
    body.profile ul.tabs.nav li a {}
  4. 4、禁止在css中使用*选择符
  5. 5、除非必须，否则，一般有class或id的，不需要再写上元素对应的tag，例如：
    1
    div#test { width: 100px; }
  6. 6、0后面不需要单位，比如0px可以省略成0，0.8px可以省略成.8px
  7. 7、如果是16进制表示颜色，则颜色取值应该大写。
  8. 8、如果可以，颜色尽量用三位字符表示，例如#AABBCC写成#ABC
  9. 9、如果没有边框时，不要写成border:0，应该写成border:none
  10. 10、尽量避免使用AlphaImageLoader
  11. 11、在保持代码解耦的前提下，尽量合并重复的样式，例如：
    1
    2
    3
    4
    5
    h1 { color: black; }
    p { color: black; }
    –>
    h1,
    p { color: black; }
  12. 12、background、font等可以缩写的属性，尽量使用缩写形式
    1
    2
    background: color image repeat attachment position;
    font: style weight size/lineHeight family;

CSS属性取值规范

字体大小font-size

font-size目前人人CSS取值的几种类型如下：

1
12px/9pt/1.2em/150%/1.7

现将font-size取值的单位类型约束如下：

  1. 1、font-size必须以px或pt为单位，推荐用px（注：pt为打印版字体大小设置）
  2. 2、不允许使用xx-small/x-small/small/medium/large/x-large/xx-large等值

字体系列font-family

目前font-family取值类型丰富多样，比如home-frame2-all-min.css中：

body Tahoma, Verdana, STHeiTi, simsun, sans-serif
.fselect-pager li a Arial
a.mini-share mingliu
.small tahoma, mingliu
select, label, textarea, input “lucida grande”, tahoma, verdana, arial, STHeiTi, simsun, sans-serif
.m-autosug small MingLiU
#appsMenuPro .menu-apps-side a.add-app-btn 宋体
.site-footer .haoes tahoma, mingliu

为了对font-family取值进行统一，更好的支持各个操作系统上各个浏览器的兼容性，现将font-family统一约束如下：

  1. 1、font-family不允许在业务代码中随意设置
  2. 2、font-family目前取值为
1
2
3
4
5
6
7
8
9
10
11
12
13
14
body {
font: 12px Tahoma, Verdana, STHeiTi, simsun, sans-serif;
}

 

input,
label,
select,
option,
textarea,
button,
fieldset,
legend {
font-family: ”lucida grande”, tahoma, verdana, arial, STHeiTi, simsun, sans-serif;
}

hack使用规范

重要原则：尽量少用hack，能不hack坚决不hack，不允许滥用hack。

如果需要使用hack，请参考以下hack方式：

区分规则

IE6 * html selector { … }
IE7 *+html selector { … }
非IE6 html>body selector { … }
firefox @-moz-document url-prefix() { … }
safari3+/chrome @media screen and (-webkit-min-device-pixel-ratio:0) { … }
opera @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { … }
iPhone/mobile webkit @media screen and (max-device-width: 480px) { … }

区分属性

IE6 _property: value
IE7 +property: value
IE6/7 *property: value
IE6/7/8/9 property: value\9

z-index取值规范

目前人人页面中的弹层较多，z-index取值也比较随意，导致相互覆盖的情况，有的弹层直接覆盖了顶部导航条。

以下是首页的一些z-index取值比较大的属性设置统计：

header头部导航条 1999
账号菜单 10001
通知提醒 10000
顶部搜索结果弹窗 10001
页面内容顶部/publisher 1998
publisher电影搜索提示 1000
用户等级与登录信息提醒 1999
回到顶部按钮 999 in css, 1001 in html
@ 10001
表情 10001
名片卡 9999
底部工具条与webpager/radio 1000 in css, 1999 in html
照片浏览弹层 5000
照片多张上传弹层 3001
XN默认弹层组件 10000
首页应用中心推荐弹层 1002
HTML5拖拽上传 999998

其他z-index设置：

.dropmenu-holder 999999
.appsMenuPro 10001
.search-Result 10002 !important
.menu-dropdown 200
.site-nav .navigation 981
.mentionFrdList 10002!important
.app-center-popup 1002
.feed-back-v6 1999
#appcardcontent 1998
.feed-comment-attach 1000
.message-box 1000
#friendcreate-box 100

这些z-index设置，极有可能造成相互覆盖，存在潜在的问题风险。例如：

  1. 1、publisher在导航条以下，但是在publisher中弹出的@、表情却在导航条以上。
  2. 2、XN的默认弹层样式穿透导航条
  3. 3、@组件与名片卡组件相互重叠

因此，有必要对z-index取值进行规范和约束。避免前端开发人员为了自己开发的功能能够正确展示，而忽略了其他组件的展示需求。

如果要为弹层设置z-index，请务必按照给定的取值区间来进行设置。

这里只是初稿，可能还需要精确到某一个组件的z-index分配，需要大家集思广益（可以参考cookie的设置流程，在使用z-index时必须经过审批）

头部导航区域 [1999 - 2100]
publisher所在的内容head区 [1998]
页面主要内容区域 [-1 - 1997]
页面底部 [1999 - 2100]
首页应用弹层 [1000]
全站公共组件 [-1 - 1999]
全页面蒙层弹窗组件 [10000-11000]

常用的 CSS 命名

头 header 内容 content 尾 footer 导航 nav
子导航 subnav 栏目 column 主体 main 新闻 news
版权 copyright 文章列表 list 加入 joinus 合作伙伴 partner
标志 logo 侧栏 sidebar 横幅 banner 状态 status
菜单 menu 子菜单 submenu 滚动 scroll 搜索 search
标签页 tab 提示信息 msg 小技巧 tips 标题 title
指南 guild 服务 service 热点 hot 下载 download
注册 regsiter 登录条 loginbar 按钮 btn 投票 vote
注释 note 友情链接 friend-link 外套 wrap 面包屑 bread-crumb
当前的 current 购物车 shop 图标 icon 文本 txt
待补充…              

其他

    1. 1、字体名称请映射成对应的英文名，例如：黑体(SimHei) 宋体(SimSun) 微软雅黑 (Microsoft Yahei)，如果字体名称中有空格，则必须加单引号。
    2. 2、背景图片请合理使用csssprites，按照模块、业务、页面来划分均可
    3. 3、css背景图片的文件类型，请按照以下原则来保存：
      1. 3.1 如果背景图片有动画，则保存成gif
      2. 3.2 如果没有动画，也没有半透明效果，则保存成png-8
      3. 3.3 如果有半透明效果，则保存成png-24
    4. 4、不要在html中加入标签来清理浮动，通过在浮动元素的父元素上添加.clearfix来清除浮动
    5. 5、为了SEO和页面可用性，请使用text-indent来隐藏文本内容。
    6. 6、制作csssprites时，尽量把颜色相近的图标放在一起，存储为png8格式，存储完以后还能用一些压缩工具进行无损压缩。
    7. 7、避免过小的背景图片平铺。
    8. 8、尽量少用!important
    9. 9、避免使用非一次性expression

 

 

posted @ 2013-03-20 16:36  sheena的世界  阅读(342)  评论(0)  编辑  收藏  举报