HTML规范：
编码格式
<meta charset="utf-8" />
注释规范
模块后面加上注释
<div class="module">
<div class=“module-function">
</div>
</div><!-- module -->
<div class="module">
…
</div><!-- module -->
使用HTML5的文档类型声明
<!DOCTYPE html>
注意标签的闭合和空格,使用双引号
<a href="…"></a>
<input type="text" />
<img src="…" alt="…" />
标签语义化，减少无语义的div和span，使用h1-h6作标题，使用ul，ol，dl作列表，建议使用html5标签
<section class="news">
<header class="news-header">
</header>
<footer class="news-footer">
</footer>
</section>
CSS文件放在head区，且在JS文件前
不要使用内联CSS和内嵌CSS（在HTML里加Style），特殊组件除外
JS框架文件可以放在头部，其他JS文件放在页面底部</body>标签的上方
标签规范
一个标签占用一行
标签缩进为 4 个空格
不使用已废弃的标签，如 <center>等
标签使用data-xxx来添加自定义数据
HTML的特殊符号使用符号实体
http://www.w3school.com.cn/tags/html_ref_entities.html
移动端meta声明
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
省略样式表与脚本上的 type 属性
<link rel="stylesheet" href="style.css">
<script src="common.js"></script>
img标签不要写上宽度和高度
CSS规范：
编码格式
@charset "utf-8";
注释规范
头部有模块名、作者、修改日期、描述，注释使用英文
/**
* sale4pos
*
* Author: wu.h1
* Date: 2014/12/16
* Description: Retail Sale4pos
*/
模块注释
/* header bar
---------------------------------- */
类注释
/* form */
引入文件规范
使用link引入，不要使用@import
<link rel="stylesheet" type="text/css" href="style.css" />
模块命名一般使用class，不用id
.module { width: 200px; }
使用中划线” - ”作为类名分割符
.module-function { }
命名语义化，不过度简写，不使用拼音
.btn { padding: 5px 10px; }
.btn-sm { padding: 3px 7px; }
书写规范
规则写成一行，属性以空格分割，冒号后有空格，属性值后有分号
.item { width: 10px; height: 10px; }
引号使用双引号，url值不使用引号
.row:after { content: " "; }
.logo { background: url(a.jpg); }
省略0后面的单位
.module-header { margin: 0; }
属性不要使用中文
.btn { font-family: "Microsoft YaHei"; }
.btn { font-family: "\5fae\8f6f\96c5\9ed1"; }
CSS属性建议书写顺序
显示属性
display, position, float, clear, overflow
自身属性
width, height, margin, padding
排列
vertical-align, white-space, text-decoration, text-align
文字
color, font, content
边框背景
border, background
属性规范
一般不要使用 !important
pc端使用px，移动端使用em
提高css模块重用率
属性使用简写
.content { margin:0 0 10px; }
类名前面不要有标签名
.content { font-size: 1.2em; }
减少层级嵌套
.red { color: #666; }
使用类名代替过多层级
.block { display: block; }
颜色值使用16进制或rgba等，并简写
.title { color: #f00; }
尽可能精确地使用选择器
.content > .title { color: #333; }
.content > .box > .title { color: #666; }
图片相关
使用合适的图片格式（png, jpg, gif, apng）
小图标使用sprites技术拼合图片
尽可能压缩图片大小
JS规范：
编码格式
使用UTF-8编码
注释规范
头部有模块名，作者，修改日期，描述
/**
* sale4pos
*
* Author: wu.h1
* Date: 2014/12/16
* Description: Retail Sale4pos
*/
模块注释
/**
* refresh type
*/
函数注释
//module name and description
书写规范
换行缩进采用 4 个空格
结束行注意添加分号
一般使用单引号，不使用双引号
属性规范
使用一个 var 来声明变量，多个使用逗号分隔
函数或变量使用驼峰式命名，类名首字母大写，变量首字母小写
提取公用方法， 提高函数重用率
避免使用 eval() 函数，使用jquery的parseJson函数
简单情况使用三元条件判断代替if else
代码中不要直接使用数字，而是事先将数字保存至一个变量或常量中
优化规范
JS文件尽量放在底部</body>前，head区的JS文件放在CSS文件后
页面中间不要有JS代码片段
合并JS文件，减少请求数
jQuery规范
注意选择器性能
var $products = $(".products");
var $products = $(".products").find('div.id ');
指定查找范围
$('.class', '#class-container');
避免使用隐式通配选择器
$('.class input:radio');
使用数组来创建dom结构
var array = [];
for(var i = 0; i < 10000; i++){
array[i] = "<li>"+i+"</li>";
}
$myList.html(array.join(''));
不要把CSS属性写在jQuery里，使用class
$("#moduleName").addClass("error");
扫一扫
5万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
