WEB前端开发规范整理

一、前端开发规范目的为提高团队协作效率，便于后台人员添加功能及前端后期优化维护，输出高质量的文档，同时为网站有一个更好的前端架构及网站的发展及未来打好一个基础。二、基本准则符合web标准, 语义化html, 结构、表现、行为分离, 兼容性优良. 页面性能方面, 代码要求简洁明了有序, 尽可能的减小服务器负载, 保证最快的解析速度. 三、文件规范1. html, css, ...

weixin_34289454

89人浏览 · 2014-05-06 14:23:59

weixin_34289454 · 2014-05-06 14:23:59 发布

一、前端开发规范目的

为提高团队协作效率，便于后台人员添加功能及前端后期优化维护，输出高质量的文档，同时为网站有一个更好的前端架构及网站的发展及未来打好一个基础。

二、基本准则

符合web标准, 语义化html, 结构、表现、行为分离, 兼容性优良. 页面性能方面, 代码要求简洁明了有序, 尽可能的减小服务器负载, 保证最快的解析速度.

三、文件规范

1. html, css, js, p_w_picpath文件均归档至约定的目录中;

2. html文件命名: 英文命名, 后缀.html 同时将对应界面稿放于同目录中, 若界面稿命名为中文, 请重命名与html文件同名, 以方便后端添加功能时查找对应页面;

3. css文件命名: 英文命名, 后缀.css. 共用base.css,其它根据模块或页面内容命名

4. Js文件命名: 英文命名, 后缀.js. 共用common.js, 其他依实际模块需求命名.

四、html书写规范

1. 文档类型声明及编码: 如支持html5统一为html5声明类型<!DOCTYPE html>;如不支持html5统一为html4.01过渡版声明类型<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " http://www.w3.org/TR/html4/loose.dtd">; mate属性统一为<meta http-equiv="Content-Type" content="text/html;charset=utf-8">,编码统一为utf-8, 书写时利用IDE实现层次分明的缩进,比如dreamweave里代码格式化命令, 代码缩进使用TAB键,尽量别使用空格

2. css和js文件外链至...之间, css文件要放在js文件上面, js可根据需求放在尾部

3. 引入样式文件或JavaScript文件时,(html5下的规则)须略去默认类型声明, 写法如下:

<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 />)等; 属性值必须用双引号包括; 如,height=80,应该写为height=”80”

6. <body>内的模块要加上注释,比如<!—content--><!—left sidebar-->等

7.注释规范. html注释使用

8.语义化html, 如标题根据重要性用h系列标题标签, h1-h6的定义应遵循从大到小的原则, 体现文档结构的同时也有利于搜索引擎的查询 (同一页面只能有一个h1,LOGO是一个站点的标志,页面中最重要的地方,所以把它分配给LOGO) , h标签不可段层; 段落标记用p, 列表用ul,ol等,内联元素中不可嵌套块级元素;

遵循表现和结构相分离的原则,代码中不涉及任何表现元素, 如<center> <font>标签等

9.能以背景形式呈现的图片, 尽量写入css样式中; 重要图片必须加上alt属性; 给重要的元素和截断的元素加上title

10. 尽可能减少div嵌套, 原则上div嵌套不超出两层, 如

<div class="box">
<div class="welcome">欢迎访问XXX, 您的用户名是
<div class="name">用户名</div>
</div>
</div>
完全可以用以下代码替代:
<div  class="box">
 <p>欢迎访问XXX, 您的用户名是<span>用户名</span></p>
</div>

11. 特殊符号应使用转意符,比如 <(<) & >(>)& 空格(  )等;

12. 必须为含有描述性表单元素(input,textarea)添加label,如

须写成:<p><label for=”name”>姓名:</label><input type=”text” id=”name” /></p>

13.关注标签语义化

五、css编码规范

1. 基本书写规范:

1)编码统一为utf-8

2) 尽量不缩写, 除非一眼就能看明白的单词

3) 用英文和减号组合命名类(如：solution-title),用下划线分隔法或者驼峰式命名法二者选其一命名ID（如：mian_menu_nav mainMenuNav 个人更偏向下划线书写方便）不允许用拼音和数字; 命名时应根据模块内容命名

4) css全部采用小写,每项定义写成一行, 属性的冒号后面要加空格, 每项定义后面要加分号; 如

.box{

width: 150px;

}

5) 所有装饰性的背景图片都要写css中, 背景图片使用css sprite

6) 减少使用影响性能的属性, 比如position:absolute || float ; 不允许在css中使用滤镜表达式, 也尽量少用图片repeat, 尤其在body当中,渲染性能极差, 如果需要用repeat的话, 图片的宽或高不能少于8px

7) 请注意采用css 缩写, 简少代码大小, 提高下载速度, 同时使代码简洁可读. 如

.box{

border-color: #fff;

border-width: 1px;

border-style: solid;

}

可以写为一句:

.box{

border: 1px solid #fff;

}

8) css属性书写顺序, 建议遵循以下顺序

影响文档流的属性–>自身盒模型属性–>排版相关属性–>装饰属性–>生成内容属性.

位置属性–>大小–>文字系列–>背景–>其他.

此条可根据自身习惯书写, 但尽量保证同类属性写在一起.

属性列举:

1. 影响文档流的属性（比如：display, position, float, clear, visibility, table-layout等）

2. 自身盒模型的属性（比如：width, height, margin, padding, border等）

3. 排版相关属性（比如：font, line-height, text-align, text-indent, vertical-align等）

4. 装饰性属性（比如：color, background, opacity, cursor等）

5. 生成内容的属性（比如：content, list-style, quotes等）

以上所列出的这些属性只是最常用到的, 并不代表全部

9) 充分利用html自身属性及样式继承原理减少代码量, 比如:

<li>这儿是标题列表<span>2010-09-15</span></li>

</ul>

css定义

ul.list li{

position: relative;

}

ul.list li span{

position: absolute;

right: 0

}

10)注意权值:标签权值：0.0.0.1;类权值：0.0.1.0;属性权值：0.0.1.1;ID权值：0.1.0.0;important权值:1.0.0.0

11) 必须为大区块样式添加注释, 小区块适量注释; 注释使用 /*注释内容*/

12)书写代码前, 考虑并提高样式重复使用率

2. 命名规则:

命名应以体现结构或内容为原则.css命名以小写英文字母和减号组合,避免使用数字,要以字母开头. 以下列出常见的基本命名，这个可以根据个人习惯，但是请保证命名符合内容

[ 模块前缀 ] - 类型 - ( 作用 | 状态 ) n - [ 位置 n ]

图例说明：
// ( 必选 )：必需存在。
// [ 可选 ]：可根据需要选择。
// |：多选一。
// n：可有多个。

名词说明：
模块前缀模块定义时使用的前缀。
类型定义类的内容类型。如输入框、文本、段落等等。
作用定义类的作用，用于对类型的补充。
状态定义类的状态，用于对类型的补充。
位置定义类所使用的位置，如首页、导航等等，不排除使用左、右这样的词，但应尽量避免。
* 每项都可有自己的一个缩写表，同一名称的缩写尽量统一。
* 所选用的单词应选择不过于具体表示某一状态（如颜色、大小等）的单词，以避免当状态改变时名称失去意义。
* 由不以数字开头的小写字母（a-z）、数字（0-9）组成。
* 确保类(.class)的重用性与对象(#id)的唯一性，id避免使用保留字。