前端开发规范文档
- 规范目的
为提高团队协作效率，便于后台人员添加功能以及后期优化维护，使开发流程更加规范化，特制此文档，本规范文档一经确认，前端开发人员必须按本文档规范进行前台页面开发。
本文档如有不对或者不合适的地方请及时提出，经讨论决定后方可更改。
- 基本准则
- 符合web标准，语义化html，遵循内容（HTML）、显示（CSS）分离的代码组织模式（除特定CSS以外）。
- 代码格式化，保持干净整洁。
- 每个模块都必须有一个独立的css，js文件。
- 编写的PC端网站，请用IE9以上、火狐、谷歌、360等浏览器进行兼容性测试；手机站，请用不同屏幕大小的手机和不内核的手机进行兼容性测试。
- HTML书写规范
- 所有元素都必须小写，属性也是，如：<input type=”text” id=”idname”/>正确，<INPUT TYPE=”text” ID=”idname”/>错误
- 标签必须成对出现，如<span></span>，特殊标签除外，如：<br/><img/><input/>
- 标签中不允许出现样式，必须用class来声明样式。
- 元素属性必须用双引号不允许使用单引号
<input type=”text” id=”idname”/>正确
<input type=’text’ id=’idname’/>错误
- 如果元素需要自定义属性，请用data-xxx方式命名。
- 多用无兼容性问题的标签。如span、label。
- 除管理后台以外，尽量避免使用table。
- 尽量按照从上到下，从左到右的顺序布局和书写。
- CSS书写规范
- 使用css缩写属性，如：padding,margin,font等。
padding-left:1px;padding-right:1px;padding-top:1px;padding-bottom:1px;可简写为：padding：1px。
- 16进制颜色代码缩写，#eebbcc--#ebc。
- 连字符CSS选择器命名规范
长名称和词组可以用中横线来为选择器命名；不建议使用下划线命名选择器，原因：浏览器不兼容，良好的区分js变量命名。
- 不要随意使用id
id在JS是唯一的，不能多次使用，而使用class类选择器却可以重复使用，另外id的优先级高于class，所以id应该按需使用，而不能滥用。
- CSS样式新建或修改尽量遵循以下原则。
根据新建样式的适用范围分为三级：全站级、产品级、页面级；
尽量通过继承和层叠重用已有样式；
不要轻易改动全站级CSS。改动后，要经过全面测试。
- css书写顺序
显示属性，如：position，display，float,clear,z-index，top等；
自身属性，如：width,height,overflow,margin,padding,border,background，outline等；
文本属性，如：color,font,text-align,line-height,cursor,content等；
兼容多个浏览器时，将标准属性写在底部；
-moz-border-radius: 15px; /* Firefox */
-webkit-border-radius: 15px; /* Safari和Chrome */
-o-border-radius: 15px;
border-radius: 15px; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 *//标准属性。
此条可根据个人习惯书写，但尽量保证同类属性写在一起
- 避免使用标签子选择符，如：ul > li > a
- Css写完之后必须使用“；”号结尾。
- 编写css样式时，不换行，自动换行除外。
- 必须为大区块样式添加注释，小区块适量注释。
- 开发过程中严格按照分工完成页面，以提高css复用率，避免重复开发。
减少使用影响性能的属性，如：position:absolute。
- JS书写规范
- JS引入代码必须集中放置在<head></head>之间，尽量不要再<head>标签外引入JS,特殊情况除外。
- JS变量、函数严禁使用不明觉厉的命名方法
- JS代码换行时，必须使用缩进
- 使用jquery选择器如果是唯一的，请使用id选择器。
- 图片规范
- 所有的页面元素类图片均放入img || image文件夹中；
- 图片格式仅限于gif || png || jpg;
- 命名全部用小写英文字母、数字、_的组合，不要使用汉字空格和特殊字符；尽量使用易懂词汇，便于团队其他成员理解。
- 注释规范
- html注释：注释格式”<!--这是注释-->”。
- Css注释：注释格式”/*这是注释*/”。
- Js注释：单行注释”//这是注释”，多行注释”/*这是注释*/”。
- CSS的命名规则
1.常用的CSS命名规则
头：header
内容：content/container
尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体佈局宽度：wrapper
左右中：left right center
登录条：loginbar
标志：logo
广告：banner
页面主体：main
热点：hot
新闻：news
下载：download
子导航：subnav
菜单：menu
子菜单：submenu
搜索：search
友情链接：friendlink
页脚：footer
版权：copyright
滚动：scroll
内容：content
标签：tags
文章列表：list
提示信息：msg
小技巧：tips
栏目标题：title
加入：joinus
指南：guide
服务：service
注册：regsiter
状态：status
投票：vote
合作伙伴：partner
- 导航
导航：nav
主导航：mainnav
子导航：subnav
顶导航：topnav
边导航：sidebar
左导航：leftsidebar
右导航：rightsidebar
菜单：menu
子菜单：submenu
标题: title
摘要: summary
- 功能
标志：logo
广告：banner
登陆：login
登录条：loginbar
注册：register
搜索：search
功能区：shop
标题：title
加入：joinus
状态：status
按钮：btn
滚动：scroll
标签页：tab
文章列表：list
提示信息：msg
当前的: current
小技巧：tips
图标: icon
注释：note
指南：guild
服务：service
热点：hot
新闻：news
下载：download
投票：vote
合作伙伴：partner
友情链接：link
版权：copyright
注：
- 后端开发人员禁止改动前端定义的类名，如需改动请添加或者与前端沟通后修改。
扫一扫
6551
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
