WEB前端开发规范文档

WEB 前端开发规范文档 目录 WEB 前端开发规范文档 1 规范目的 2 基本准则 2 文件规范 2 html 书写规范 2 html 其他规范 3 css 书写规范 4 JavaScript 书写规范 5 jQuery 部分 5 开发及测试工具约定 6 其他规范 6 规范目的 为提高团队协作效率 便于后台人员添加功能及前端后期优化维护 输出高质量的文档 特制订此文 档 本规范文档一经确认 前端开发人员必 须按本文档规范进行前台页面开发 本文档如有不对或者不合 适的地方请及时提出 经讨论决定后方可更改 基本准则 1 符合 web 标准 语义化 html 遵循内容 HTML 显示 CSS 行为 JavaScript 分离的 代码组织 模式 2 代码格式化 保持干净整洁 3 换行必须缩进一个 tab 4 编写所有前台页面时 请使用已有模板进行复制 在模板的基础上进行开发 5 每一个页面都必须有一个独立的 css js 文件 6 如果不是用 HTML5 编写的网站 请用 IE7 IE8 IE9 火狐 谷歌 webkit safari 内核进行测试兼容 性 7 如果是 HTML5 编写的网站 请用 IE9 火狐 谷歌 webkit safari 内核进行测试兼容性 文件规范 1 html css js images 文件均归档至 约定的目录中 2 html 文件命名 英文命名 后缀 htm 同时将对应界面稿放于同目录中 若界面稿命名为中文 请重命 名与 html 文件同名 以方便后端添加 功能时查找对应页面 3 css 文件命名 英文命名 后缀 css 共用 base css 首页 index css 其他页面依实际模块需求命名 4 Js 文件命名 英文命名 后缀 js 共用 common js 其他依实际模块需求命名 html 书写规范 1 所有元素都必须小写 属性也是 如 正确 错误 2 元素必须成对出现 如必须写成特殊元 素除外 如 3 标签中不允许出现样式 必须用 class 来声明样式 如 错误 正确 4 元素 id 命名必须是驼峰式命名如 正确 错误 错误 5 元素 class 命名规范是 元素简写 功能名 如 正确 错误 错误 6 元素 name 命名必须遵循驼峰式命名法 正确 错误 错误 7 元素属性必须有值 正确 8 元素属性必须用双引号 不允许使用单引号 正确 错误 9 如果元素需要自定义属性 请用 data xxx 方式命名 10 严禁使用已在 XHTML1 0 中已移除的标签 如 s i b font 等 html 其他规范 1 文档类型声明及编码 统一为 html5 声明类型 编码统一为 书写时利用 IDE 实现层 次分明的缩进 2 非特殊情况下样式文件必须外链至 之间 非特殊情况下 JavaScript 文件必须外链至 页面底部 3 引入样式文件或 JavaScript 文件时 须略去默认类型声明 写法如下 Example Source Code www 52css com 4 引入 JS 库文件 文件名须包含库名称及版本号及是否为压缩版 比如 jquery 1 4 1 min js 引入插件 文件名格式为库名称 插件名称 比 如 jQuery cookie js 5 所有编码均遵循 xhtml 标准 标签 属性值必须用双引号包括 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 如 Example Source Code www 52css com 姓 名 须写成 姓 名 12 能以背景形式呈现的图片 尽量写入 css 样式中 13 重要图片必须加上 alt 属性 给重要的元素和截断的元素加上 title 14 给区块代码及重要功能 比如循环 加上注释 方便后台添加功能 15 特殊符号使用 尽可能使用代码替代 比如 16 书写页面过程中 请考虑向后扩展性 css 书写规范 1 元素尽量使用 class 选择器匹配 对于特殊功能可以考虑使用 ID 选择器 2 明确各选择器的优先级 作用范围 3 CSS 写完之后必须使用 号结尾 虽然浏览器支持不用分 号结尾 但是不建议这么做 4 除非编写 HTML5 页面 否则不允许使用 CSS3 伪类 如 nth child 1 等伪类 禁止使用 5 编写 CSS 样式时 不允许换行 样式必须一行写完 自动换行 除外 6 对于子元素样式采用链选择器进行选择 如 btn save div 7 元素选择器只能在定义全局 CSS 和子元素匹配时使用 尽量少 用 其他地方禁止使用 8 请记住 IE 浏览器的 hack 方式 如下 IE6 width 100px IE7 width 100px IE8 width 100px 9 IE8 9 width 100px 0 IE9 width 100px 9 0 9 编码统一为 utf 8 10 css 属性书写顺序 建议遵循 布局定位属性 自身属性 文本属性 其他属性 此条可根据自身习 惯书写 但尽量保证同类属 性写在一起 11 书写代码前 考虑并提高样式重复使用率 12 充分利用 html 自身属性及样式继承原理减少代码量 比如 Example Source Code www 52css com 这儿是标题列表2010 09 15 定义 ul list li position relative ul list li span position absolute right 0 即可实现日期居右显示 13 样式表中中文字体名 请务必转码成 unicode 码 以避免编码错误时乱码 14 使用 table 标签时 尽量避免使用 table 标签 请不要用 width height cellspacing cellpadding 等 table 属性直接定义表现 应尽可能的利用 table 自身私有属性分离结构与表现 如 Example Source Code www 52css com 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 文件中我会初始化表格样式 15 杜绝使用 兼容 ie8 Example Source Code www 52css com background none filter progid DXImageTransform Microsoft AlphaImageLoader sizingMethod crop src img bg png 16 避免兼容性属性的使用 比如 text shadow css3 的相关属性 17 减少使用影响性能的属性 比如 position absolute float 18 必须为大区块样式添加注释 小区块适量注释 JavaScript 书写规范 1 JS 必须使用外部文件方式加载 2 JS 引入代码必须集中放置在之间 严禁在 标签外引入 JS 特殊情况除外 3 JS 变量命名请使用驼峰式命名法 4 JS 变量严禁使用不明觉厉的命名方法 如 var a var b 5 每一个函数与事件监听都必须有注释 声明其作用 如果代码 过长 那么请对一个功能模块进行 注释 6 JS 函数命名必须使用驼峰式命名 7 JS 函数严禁使用不明觉厉的命名方法 如 function a 8 JS 代码换行时 必须使用缩进 jQuery 部分 1 使用 jQuery 选择器如果是唯一的 请使用 ID 选择器 2 使用 class 选择器时 在 class 前加上标签名 如 div class 正确 class 错误 3 尽量使用 ID 选择器代替 class 选择器 4 如果一个变量存放的是 jQuery 对象的话 那么请用 符号 开头 声明这是一个 jQuery 对象 5 避免使用 live 函数绑定事件 可以使用 bind 和 on 代替 6 把页面上可能会影响页面加载速度的代码绑定到 window load 事件中 如动画 视觉特效等代码 图片规范 1 所有页面元素类图片均放入 img 文件夹 测试用图片放于 img demoimg 文件夹 2 图片格式仅限于 gif png jpg 3 命名全部用小写英文字母 数字 的组合 其中不得包含汉字 空格 特殊字符 尽量 用易懂的词汇 便于团队其他成员理 解 另 命名分头尾两部分 用下划线隔开 比如 ad left01 gif btn submit gif 4 在保证视觉效果的情况下选择最小的图片格式与图片质量 以减少加载时间 5 尽量避免使用半透明的 png 图片 若使用 请参考 css 规范相关说明 注释规范 1 html 注释 注释格式 只能在注释的始末位置 不可置入注释文字区域 2 css 注释 注释格式 这儿是注释 3 JavaScript 注释 单行注释使用 这儿是单行注释 多行注释使用 这儿有多行注释 开发及测试工具约定 建议使用 Aptana Dw Vim 亦可根据自己喜好选择 但须遵循如下原则 1 不可利用 IDE 的视图模式 画 代码 2 不可利用 IDE 生成相关功能代码 比如 Dw 内置的一些功能 js 3 编码必须格式化 比如缩进 建议测试顺序 FireFox IE7 IE8 IE6 Opera Chrome Safari 建议安装 firebug 及 测试工具 前期开发仅测试 FireFox IE Tab Plus 插件 其他规范 1 开发过程中严格按分工完成页面 以提高 css 复用率 避免重复开发 2 减小沉冗代码 书写所有人都可以看的懂的代码 简洁易懂是一种美德 为用户着想 为服务器着 想