无论是从技术角度还是开发视角，对于web前端开发规范文档都有一定规范，本文就css3和html5的发展前景总结了一系列的web开发文档，仅供大家参考。
规范目的
为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发. 本文档如有不对或者不合适的地方请及时提出, 经讨论决定后方可更改.
基本准则
符合web标准, 语义化html, 结构表现行为分离, 兼容性优良. 页面性能方面, 代码要求简洁明了有序, 尽可能的减小服务器负载, 保证最快的解析速度.
html书写规范
Ø 文档类型声明及编码
n 统一为html5声明类型<!DOCTYPEhtml>
n 编码统一为<metacharset=“utf-8″ />
n 书写时利用IDE实现层次分明的缩进
<!DOCTYPE html>
<html lang=“zh-CN”>
<head>
<meta charset=“utf-8”>
<title>document</title>
</head>
<body>
</body>
</html>
Ø 非特殊情况下CSS文件必须外链至<head>…</head>之间;非特殊情况下JavaScript文件必须外链至页面底部
<!DOCTYPE html>
<html lang=“zh-CN”>
<head>
<meta charset=“utf-8”>
<meta http-equiv=“X-UA-Compatible”content=“IE=edge”>
<meta name=“viewport” content=“width=device-width,initial-scale=1”>
<title>document</title>
<link rel=“stylesheet”href=“css/bootstrap.min.css” />
</head>
<body>
<div>contents…</div>
<scriptsrc=“js/jquery-2.1.4.min.js”></script>
<scriptsrc=“js/bootstrap.min.js”></script>
</body>
</html>
Ø 引入样式文件或JavaScript文件时, 须略去默认类型声明, 写法如下
n <link rel=“stylesheet”href=“…” />
n <style>…</style>
n <script src=“…”></script>
Ø 引入JS库文件, 文件名须包含库名称及版本号及是否为压缩版, 比如jquery-1.4.1.min.js; 引入插件, 文件名格式为库名称+插件名称, 比如jQuery.cookie.js;
Ø 所有编码均遵循xhtml标准, 标签&属性&属性命名必须由小写字母及下划线数字组成, 且所有标签必须闭合, 包括br (<br />), hr(<hr />)等; 属性值必须用双引号包括
Ø 如果需要使用自定义属性时，请使用以”data-”前缀开头的属性：
<div data-name=“test” data-id=“1”>contents…</div>
Ø 语义化html, 如标题根据重要性用h*(同一页面只能有一个h1),段落标记用p, 列表用ul, 内联元素中不可嵌套块级元素
Ø 书写链接地址时, 必须避免重定向，例如：href=“http://itaolun.com/”,即须在URL地址后面加上”/”
Ø 在页面中尽量避免使用style属性,即style=“…”
Ø 必须为含有描述性表单元素(input,textarea)添加label, 如
<p>姓名: <input type=“text” id=“name” name=“name” /></p>（错误）
<p><labelfor=“name”>姓名: </label><input type=“text”id=“name” /></p>（正确）
Ø 能以背景形式呈现的图片, 尽量写入css样式中
Ø 重要图片必须加上alt属性; 给重要的元素和截断的元素加上title
Ø 给区块代码及重要功能(比如循环)加上注释, 方便后台添加功能
Ø 特殊符号使用: 尽可能使用代码替代: 比如<(<)&>(>) &空格( ) & ?(?) 等等
Ø 书写页面过程中, 请考虑向后扩展性
css书写规范
Ø 编码统一为utf-8
Ø css类命名规范
n 类的命名与业务逻辑绑定，全部采用小写的英文单词，杜绝使用无意义的类名如：.a/.xxx等
n 公告模块使用单个英文单词如：.header/.footer/.main/.dialog等
n 业务逻辑模块使用2个以上的单词，单词与单词见使用-分隔，如：.login-submit
Ø 书写代码前, 考虑并提高样式重复使用率
Ø 充分利用html自身属性及样式继承原理减少代码量, 比如:
<ul class=“list”><li>这儿是标题列表<span>2010-09-15</span></ul>
定义
ul.listli{position:relative} ul.list lispan{position:absolute; right:0}
即可实现日期居右显示
Ø 背景图片请尽可能使用sprite技术, 减少http请求个数, 考虑到多人协作开发,sprite按模块制作
Ø 使用css3属性的时候，需要把标准属性和各大浏览器厂商的兼容属性都写全，如：
.dialog{
transition: all 0.5s ease;
-webkit-transition:all 0.5s ease;
}
Ø 必须为大区块样式添加注释,小区块适量注释
Ø 代码缩进与格式: 建议单行书写, 可根据自身习惯, 后期优化i会统一处理;
JavaScript书写规范
Ø 文件编码统一为utf-8,书写过程中, 每行代码结束必须有分号;
Ø 基础框架库：原则上仅引入jQuery库, 若需引入第三方库, 须与团队其他人员讨论决定
Ø 变量命名规范：
n 变量命名与业务逻辑绑定，全部采用小写的英文单词，杜绝使用无意义的类名如：.a/.xxx等
n 变量出现2个以上单词时，使用“_”分隔，如：login_submit/index_slide等
n 为this取别名时，要求采用_this
Ø 类命名: 首字母大写, 驼峰式命名. 如CEMFormValid
Ø 函数命名：同变量命名规则
Ø 避免使用一下js方法或属性：eval()/width
Ø 注释书写规范：
n 类名、方法名以及主要逻辑部分要求添加注释
n 类名和方法名采用文档格式的注释：
/**
* 首页表单验证方法
* @paramsvalid_name[String]验证类型名称
*/
functionindex_valid(valid_name, element){
// 逻辑代码。。。。。。。。。。。。
returnfalse
}
n 变量以及逻辑代码采用单行注释：
$(“#xxx”).fadeOut(); //当页面加载完毕时，隐藏xxx元素