前端开发规范规范目的为提高团队协作效率，便于后台人员添加功能及前端后期优化维护，输出高质量的文档，特制订此文档。本规范文档一经确认，前端开发人员必须按本文档规范进行前台页面开发。 本文档如有不对或者不
前端开发规范
规范目的
为提高团队协作效率，便于后台人员添加功能及前端后期优化维护，输出高质量的文档，特制订此文档。本规范文档一经确认，前端开发人员必须按本文档规范进行前台页面开发。 本文档如有不对或者不合适的地方请及时提出，经讨论决定后方可更改。
通用约定
- 基本准则：符合web标准，语义化html，结构表现行为分离，兼容性优良。页面性能方面，代码要求简洁明了有序，尽可能的减小服务器负载，保证最快的解析速度。
- 文件与目录命名约定：一律小写，必须是英文单词或产品名称的拼音，多个单词用下划线(_)连接。只能出现英文字母、数字和下划线，严禁出现中文；出现版本号时，需要用字母 v 做为前缀，小版本号用点号(.)隔开，比如 global_v8.js 或 detail_v2.2.js；该命名规范适用于 html, css, js, swf, xml, png, gif, jpg, ico 等前端维护的所有文件类型和相关目录。
- 文件编码约定：一律使用 UTF-8 编码.
- id 和 class 命名约定：内容优先,表现为辅。首先根据内容来命名，比如 main-nav。如果根据内容找不到合适的命名，可以再结合表现来定，比如 skin-blue、 present-tab、col-main；用于样式的 id 和 class 名称一律小写，多个单词用连字符连接，比如 recommend-presents，名称中只能出现小写的 26 个英文字母、数字和连字符(-)，任何其它字符都严禁出现；id 和 class 尽量用英文单词命名。确实找不到合适的单词时，可以考虑使用产品的中文拼音；在不影响语义的情况下， id 和 class 名称中可以适当采用英文单词缩写， 比如 col, nav, hd, bd, ft 等， 但切忌自造缩写；id 和 class 名称中的第一个词必须是单词全拼或语义非常清晰的单词缩写， 比如 present、col；在 JavaScript 代码中当作 hook 用的 id 或 class， 命名规则为驼峰规则，比如：navSubMenu，tableForm。 注意：如果在 JavaScript 和 CSS 中都需要用到，则不用遵守本约定。
HTML编码规范
(1) 语义
使用符合语义的标签书写 HTML 文档, 选择恰当的元素表达所需的含义
<!-- 不推荐 --><div onclick="goToRecommendations();">All recommendations</div><!-- 推荐 --><a href="recommendations/">All recommendations</a>(2) 大小写
元素的标签和属性名必须小写, 属性值必须加双引号; 例如：
<!-- 不推荐 --><A HREF='/'>Home</A><!-- 推荐 --><a href="/">Home</a>(3) 空格
去除比不必要的空格; 例如：
<!-- 不推荐 --><p>test </p><!-- 推荐 --><p>test</p>(4) 嵌套
元素嵌套遵循 (X)HTML Strict 嵌套规则；正确区分自闭合元素和非自闭合元素. 非法闭合包括：<br>..</br>、<script />、<iframe />, 非法闭合会导致页面嵌套错误问题；尽可能减少div嵌套层数。
(5) 自定义属性
通过给元素设置自定义属性来存放与 JavaScript 交互的数据, 属性名格式为 data-xx (例如：data-lazyload-url)。某些第三方插件自有数据不限此规范。
(6) DOCTYPE和编码页面文档类型统一使用HTML5 DOCTYPE，utf-8 编码，代码如下：
<!doctype html><meta charset="utf-8" />(7) 注释建议对超过10行的页面模块进行注释, 以降低开发人员的嵌套成本和后期的维护成本. 例如：
<div id="sample"> ... </div> <!-- #sample END --><div class="sample"> ... </div> <!-- .sample END -->(8) TODO使用 TODO 来标记待做事情，便于后期搜索，在 TODO 后添加 (姓名或邮件) 来表示分类。
<!-- TODO(haovei): remove duplicate tag --><p><span>2</span></p>(9) 代码分离将表现，行为和结构分离：不要在 html 和模板中加入除了结构以外的东西，在文档中引入尽可能少的样式和脚本；在页面中尽量避免使用style属性,即style="…"。
(10) 结构性元素p 表示段落. 只能包含内联元素, 不能包含块级元素；div 本身无特殊含义, 可用于布局. 几乎可以包含任何元素；br 表示换行符；hr 表示水平分割线；h1-h6 表示标题. 其中 h1 用于表示当前页面最重要的内容的标题；blockquote 表示引用, 可以包含多个段落. 请勿纯粹为了缩进而使用 blockquote, 大部分浏览器默认将blockquote 渲染为带有左右缩进；pre 表示一段格式化好的文本。
(11) 头部元素title 每个页面必须有且仅有一个 title 元素；base 可用场景：首页、频道等大部分链接都为新窗口打开的页面；link link 用于引入 css 资源时, 可省去 media(默认为all) 和 type(默认为text/css) 属性；style type 默认为 text/css, 可以省去；script type 属性可以省去; 不赞成使用lang属性; 不要使用古老的<!– //–>这种hack脚本, 它用于阻止第一代浏览器(Netscape 1和Mosaic)将脚本显示成文字；noscript 在用户代理不支持 JavaScript 的情况下提供说明;。
<!-- 不推荐 --><link rel="stylesheet" href="//www.google.com/css/maia.css" type="text/css"><script src="//www.google.com/js/gweb/analytics/autotrack.js" type="text/javascript"></script><!-- 推荐 --><link rel="stylesheet" href="//www.google.com/css/maia.css"><script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>(12) 文本元素特殊符号使用: 尽可能使用代码替代:比如 < ( < )、> ( > ) 、空格 ( ) 、» ( » )；a a 存在 href 属性时表示链接, 无 href 属性但有 name 属性表示锚点；em,strong em 表示句意强调, 加与不加会引起语义变化, 可用于表示不同的心情或语调; strong 表示重要性强调, 可用于局部或全局, strong强调的是重要性, 不会改变句意；abbr 表示缩写；sub,sup 主要用于数学和化学公式, sup还可用于脚注；span 本身无特殊含义；ins,del 分别表示从文档中增加(插入)和删除。
(13) 媒体元素img 请勿将img元素作为定位布局的工具, 不要用他显示空白图片; 给img元素增加alt属性object/embed 可以用来插入Flash。
(14) 列表元素dl 表示关联列表，dd是对dt的解释；dt和dd的对应关系比较随意： 一个dt对应多个dd、多个dt对应一个dd、多个dt对应多个dd, 都合法； 可用于名词/单词解释、日程列表、站点目录；ul 表示无序列表；ol 表示有序列表, 可用于排行榜等；li 表示列表项, 必须是ul/ol的子元素。
(15) 表单元素推荐使用 button 代替 input, 但必须声明 type，不同浏览器的 type 值不一样；推荐使用 fieldset, legend 组织表单；单选或多选 input 建议使用 label 包含；表单元素的 name 不能设定为 action, enctype, method, novalidate, target, submit 会导致表单提交混乱；
**(16)**文档模板
<!doctype html><html> <head> <meta charset="utf-8" /> <title>Sample page</title> <link rel="stylesheet" href="css_example_url" /> </head> <body> <div id="page"> <div id="header"> 页头 </div> <div id="content"> 主体 </div> <div id="footer"> 页尾 </div> </div> <script src="js_example_url"></script> <script> // 你的代码 </script> </body></html>CSS规范
(1) 命名使用小写字母，复合词以下划线(_)分隔；例如 nav.css，login_nav.css，login_page.css。
(2) id 和 class 的命名id 和 class 的命名总规则为： 内容优先,表现为辅. 首先根据内容来命名, 比如 main-nav. 如果根据内容找不到合适的命名, 可以再结合表现来定, 比如 skin-blue, present-tab, col-main；用于样式的 id 和 class 名称一律小写, 多个单词用连字符连接, 比如 recommend-presents.，名称中只能出现小写的 26 个英文字母、数字和连字符(-), 任何其它字符都严禁出现；id 和 class 尽量用英文单词命名 . 确实找不到合适的单词时, 可以考虑使用产品的中文拼音；在不影响语义的情况下, id 和 class 名称中可以适当采用英文单词缩写, 比如 col, nav, hd, bd, ft 等, 但切忌自造缩写；id 和 class 名称中的第一个词必须是单词全拼或语义非常清晰的单词缩写, 比如 present, col。
(3) 简写属性名字
/* 不推荐 */border-top-style: none;font-family: palatino, georgia, serif;font-size: 100%;line-height: 1.6;padding-bottom: 2em;padding-left: 1em;padding-right: 1em;padding-top: 0;/* 推荐 */border-top: 0;font: 100%/1.6 palatino, georgia, serif;padding: 0 1em 2em;(4) 0、0前缀 和 单位对属性值为 0 的情况省略单位，省略属性值中的 0 前缀。例如：
margin: 0;padding: 0;font-size: .8em;(5) CSS3兼容书写形式
.selector { -webkit-box-shadow: 0 0 5px rgba(200, 200,200, 0.8); -moz-box-shadow: 0 0 5px rgba(200, 200,200, 0.8); box-shadow: 0 0 5px rgba(200, 200,200, 0.8);}(6) 注释
成组的 css 规则间用块状注释和空行分离
/* Header */#login-header {}#login-header-below {}/* Footer */#login-footer {}#login-footer-below {}/* Gallery */.login-gallery {}.login-gallery-other {}(7) 特别注意避免滥用CSS Hack；使用after或overflow的方式清浮动，不要在html里增加多余的标签；CSS尽可能的放在head里；避免使用filter、expression、@import、!important；避免直接定义标签的样式。如： div { ... }；避免在标签上直接写样式；绝对不要在CSS中使用“*”选择符；内联和外联的CSS都必须放在页面的head里。
