web前端开发规范

web 前端开发规范篇一：WEB 前端开发规范 v2WEB 前端开发规范 规范目的 为提高团队协作效率， 便于后台人员添加功能及前端后期优化维护，输出高质量的文档，特制订此文档。本规范文档一经确认，前端开发人员必须按本文档规范进行前台页面开发。本文档如有不对或者不合适的地方请及时提出，经讨论决定后方可更改。 基本准则 符合 web 标准；语义化 html；结构、表现、行为分离；兼容性优良。页面性能方面，代码要求简洁明了有序，尽可能的减小服务器负载，保证最快的解析速度。 文件规范 2. html 文件命名：英文驼峰式命名，文件名.html。按实际模块需求命名。 3. jsp 文件命名：英文驼峰式命名，文件名.jsp。按实际模块需求命名。 4. css 文件命名：英文驼峰式命名，文件名.css。共用，首页，其他 页面按实际模块需求命名。 5. js 文件命名：英文驼峰式命名，文件名.js。共用，其他依实际模块需求命 名。 html 书写规范 1. 文档类型声明及编码： 统一为 html5 的声明类型；编码统一为 ，书写时利用 IDE 实现层次分明的缩进。 2. 非特殊情况下 css 文件必须在.之间引入，选择link 方式引入而非 import 形式。 3. 非特殊情况下 js 文件必须在页面底部引入。 4. 引入样式文件或 JavaScript 文件时，须略去默认类型声明，写法如下： 10. 需要为 html 元素添加自定义属性的时候，首先要考虑下有没有默认的已有的合适标签去 设置，如果没有，须以“data-“为前缀来添加自定义属性，避免使用“data：“等其他命名方式。 11. 语义化 html，如标题根据重要性用 h1-h6(同一页面只能有一个 h1)，段落标记用 p，列表 用 ul，内联元素中不可嵌套块状元素。 12. 尽可能减少 div 的嵌套层数。 13. 在页面中尽量避免使用内嵌样式表，即在标签内使用 style=“?“。 14. 以背景形式呈现的图片，尽量写入 css 样式中；重要图片必须加上 alt 属性； 15. 特殊符号使用：尽可能使用代码替代：比如()、空格( )、 2. html 文件命名: 英文命名, 后缀.htm. 同时将对应界面稿放于同目录中, 若界面稿命名为中文, 请重命名与 html 文件同名, 以方便后端添加功能时查找对应页面; 3. css 文件命名: 英文命名, 后缀.css. 共用, 首页, 其他页面依实际模块需求命名.; 4. Js 文件命名: 英文命名, 后缀 .js. 共用, 其他依实际模块需求命名. html 书写规范 1. 文档类型声明及编码: 统一为 html5 声明类型 ; 编码统一为 charset=“gbk“ /, 书写时利用IDE 实现层次分明的缩进; 2. 非特殊情况下样式文件必须外链至.之间;非特殊情况下 JavaScript 文件必须外链至页面底部; 3. 引入样式文件或 JavaScript 文件时, 须略去默认类型声明, 写法如下: . 4. 引入 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=“” ； 10. 在页面中尽量避免使用 style 属性,即style=“; 11. 必须为含有描述性表单元素(input, textarea)添加 label, 如 姓名: 须写成: for=“name“姓名:12. 能以背景形式呈现的图片, 尽量写入 css 样式中; 13. 重要图片必须加上 alt 属性; 给重要的元素和截断的元素加上 title;14. 给区块代码及重要功能(比如循环)加上注释, 方便后台添加功能; 15. 特殊符号使用: 尽可能使用代码替代: 比 如 () 16. 书写页面过程中, 请考虑向后扩展性; 17. class 2. 协作开发及分工: i 会根据各个模块, 同时根据页面相似程序, 事先写好大体框架文件, 分配给前端人员实现内部结构 共用 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 统一命名.其他样式名称由 小写英文 避免使用中文拼音, 尽量使用简易的单词组合 ; 总之 , 命名要语义化, 简明化. 6. 规避 class 与 id 命名(此条重要, 若有不明白请及时与 i 沟通): a） 通过从属写法规避, 示例见 d; b）取父级元素 id/class 命名部分命名, 示例见 d; c）重复使用率高的命名, 请以自己代号加下划线起始, 比如 i_clear; d）a,b 两条, 适用于在 2 中已建好框架的页面, 如, 要在 2 中已建好框架的页面代码中加入新的 div 元素, 按 a 命名法则: class=“firstnav“., 样式写法: #mainnav .firstnav. 按 b 命名法则: class=“main_firstnav“., 样式写法: .main_firstnav. 篇三：WEB 前端开发规范归纳WEB 前端开发规范归纳 创建时间：XX 创建人：高部 A、xhtml 布局主体结构方式: 一、主体结构： 1.总体结构: 顶部工具栏 主体内容放置区域 logo,搜索条，说明文字等 导航条, 分类导航，二级子导航 该套前端规范不存在网页主体内容只说，全部使用模块化(为了多页面使用同一模块方便) 例如: 顶部主体 header 主体 nav 主体 模块 1 模块 2 模块 2 footer 主体 B、css/xhtml 命名方法： id 和 class 命名采用该版块的英文单词或组合命名，使用英文命名原则，尽量不缩写，除非一看就明白或特别长的单词，使用横线分隔命名方法，css 名中的每一个单词间横线线来分隔。例如：#box，.slider-img-box。 一些常用的命名单词： 容 器：box 主体内容：main 侧边栏：side 头 部：header 中部：content底 部：footer 主 导 航：nav 子 导 航：sub-nav 广 告：ad 当前选中：current , (页面会有很多地方会使用到选中样式，命名时尽量加前缀:，例 如：.tab-curre, .slider-curr) 标 题：title 列 表：list 功能：action 列定义：col- 风格：skin 1.使用 css 缩写 颜色 16 进制的色彩值，如果每两位的值相同，可以缩写一半，例如：#000000 可以缩写为#000；#336699 可以缩写为#369。 盒尺寸 通常有下面四种书写方法： property：value1； 表示所有边都是一个值value1。 property： value1 value2； 表示 top 和 bottom 的值是 value1， right 和 left 的值是 value2。 property： value1 value2 value3； 表示 top 的值是 value1，right 和 left 的值是 value2，bottom 的值是value3。 property：value1 value2 value3 value4； 四个值依次表示 top，right，bottom，left (上右下左)。 方便的记忆方法是顺时针，上右下左。具体应用在margin 和 padding 的例子如下： margin：10px 0 2px 5px。 边框(border) 边框的属性如下： border-width：1px； border-style：solid； border-color：#000； 可以缩写为一句：border：1px solid #000, 注意三个属性的位置； 背景(Background) 背景的属性如下： background-color：#f00； background-image：url()； background-repeat：no-repeat；background-attachment：fixed； background-position：0 0； 可以缩写为一句：background：#f00 url() no-repeat fixed 0 0； 2、明确定义单位(px)，除非值为 0 3、正确使用 class 前的元素限定 限定了.login-btn 只有在 input 标签内才是有效的。3、多重 CSS 样式定义，属性追加重复最后优先原则 一个标签可以同时定义多个 class，也可以是同一个class 中重复定义属性。例如： 先定义两个样式 .onewidth：200px；background：red； .twoborder：10px solid #000； background：yellow； 在页面代码中，我们可以这样调用： 应用到的样式如下： width：200px； border：10px solid #000； background：yellow； 4、CSS 的优先级 行内样式(inline style) ID 选择符 样式(class)，伪类(pseudo-class)和属性(attribute)选择符 类别(type)，伪对象(pseudo-element)。 解释： *内联样式(inline style)：元素的 style 属性，比如 ，其中的 color：red；就是行内样式。 *ID 选择符：元素的 id 属性，比如 可以用 ID 选择符#content。 *伪类(pseudo-class)：最常见的是锚(a)伪类，比如a：link，a：visited。 *属性选择符(attribute selectors)：比如divclass=demo，含有 class 为 demo 的 div 元素。 *类别选择器(type selector)：HTML 标签选择，比如div .demo，div 元素下含有 class 为 demo 的元素。 *伪对象选择器(pseudo-element selector)：比如 div：first-letter，div 元素下的第一个单词。 5、尽量做到最少使用 CSS hack C、javascript 开规范: 该系统 js 底层使用版本为基础，主体采用命名空间结构，解决命名冲突问题. 1.主体构架方式: var h = 除 jquery 插件以外的所有方法均放在该基类中！ a_fun:function()所有实际方法必须有说明注释( 方法的功能，参数的说明 ) , b_fun:function()命名统一采用小写 。 ，以下划线分割单词， （编写方法名时，注意冲突问题） , . ; 插件: 尽量使用 jquery 类级别的插件开发，少使用对象级别的插件开发 例如： _fn1 = function(param) 常规使用 (function($) $._fn1 = function() )(jQuery); 对象级别 命名统一为 总对象 h_插件名字,参数大于 3 个。统一为使用匿名对象传递! 3、页面独立 js 如有页面独立 js（ 即只有一个地方用到的 js 效果，函数等） ，尽量使用闭包方式，如果没有，全局变量全部为window 的属性( 代码的易读性！)