本文详细介绍了一套全面的前端开发规范，涵盖了HTML、CSS、JavaScript的编写原则，旨在提高代码质量和可维护性。
一．文件规范
1.1 分类
(a).Html，Css，Js，Images文件均归档至约定的目录中; 目录命名尽可能使用英文，语义化，英文字母开头，使用驼峰式或者下划线链接，避免使用中划线;
(b).公用部分和各模块必须分开。比如：公用部分可放在子目录文件夹public下，各功能模块各建一个有意义的文件夹。注意无论是html,css还是js公共代码必须分离出来，使文件可重复使用且不冲突。
1.2 命名
HTML:英文命名，整个网站统一后缀“.html”，不要出现其他后缀;
CSS:英文命名，后缀“.css”，注意每新建一个项目必须有一个公共css文件，命名为style.css或layout.css，引入到各个页面中;
JS:英文命名，后缀“.js”。
注：css文件和js文件要在首行标注作者和创建日期。
二．书写规范
2.1.HTML书写规范
2.1.1 文档声明及编码
统一为 html5 声明类型<!DOCTYPE html>;编码统一为<meta charset=”utf-8″/>，书写时利用 IDE 实现层次分明的缩进.
2.1.2 标签
尽量减少标签数量，尤其尽可能减少div嵌套，必要时嵌套应该不超过五层。
2.1.3 id与class命名
(a).class 尽量以功能或内容命名，避免拼音命名；
(b).class 与 id 命名单词字母小写，多个单词组成时，class采用中划线-分隔,id采用下划线_或者驼峰式命名；
(c).使用唯一的 id 作为 Javascript hook, 同时避免创建无样式信息的 class；
2.1.4 属性顺序
HTML 属性应该按照特定的顺序出现以保证易读性。
(a).id
(b).class
(c).name
(d).data-xxx
(e).src, for, type, href
(f).title, alt
(g).aria-xxx, role
2.1.5 引号
属性的定义，统一使用双引号。
<!-- Not recommended -->
<span id='j-hook' class="text">Google</span>
<!-- Recommended -->
<span id="j-hook" class="text">Google</span>
2.1.6嵌套
(a).a 不允许嵌套 div这种约束属于语义嵌套约束，与之区别的约束还有严格嵌套约束，比如a 不允许嵌套 a。
(b).严格嵌套约束在所有的浏览器下都不被允许；而语义嵌套约束，浏览器大多会容错处理，生成的文档树可能相互不太一样。
语义嵌套约束
(a).<li> 用于 <ul> 或 <ol> 下；
(b).<dd>, <dt> 用于 <dl> 下；
(c).<thead>, <tbody>, <tfoot>, <tr>, <td> 用于 <table> 下；
严格嵌套约束
(a).inline-Level 元素，仅可以包含文本或其它 inline-Level 元素;
(b).<a>里不可以嵌套交互式元素<a>、<button>、<select>等;
(c).<p>里不可以嵌套块级元素<div>、<h1>~<h6>、<p>、<ul>/<ol>/<li>、<dl>/<dt>/<dd>、<form>等。
2.1.7 通用
(1).非特殊情况下样式文件必须外链至<head>…</head>之间;非特殊情况下JavaScript文件必须外链至页面底部;
(b).代码结构要清晰，做好缩进，每一层缩进两格。充分利用html5的语义化标签，例如头部用<header>,导航用<nav>,页脚用<footer>等，每一个模块的开始和结尾要写好注释，例如：
<!-- 页头 -->...<!-- 页头./ -->
(c).充分利用无兼容性问题的 html 自身标签，比如 span，em，strong，optgroup，label等等; 需要为html元素添加自定义属性的时候，首先要考虑下有没有默认的已有的合适标签去设置，如果没有，可以使用须以”data-”为前缀来添加自定义属性，避免使用”data:”等其他命名方式;
(d).必须为含有描述性表单元素(input, textarea)添加 label，如：
<p>姓名: <input type=”text” id=”name” name=”name” /></p>
须写成:
<p><label for=”name”>姓名: </label><input type=”text” id=”name” /></p>
2.1.8 优化
(a).标签中避免写空属性，例如：<div id=""></div>,这时要把id删掉
(b).在浏览器里，当我们点击空链接时，它会自动将当前页面重置到首端，从而影响用户正常的阅读内容， 我们用代码“javascript:void(0);”代替原来的“#”标记
2.2 css书写规范
2.2.1 基本准则
(a).公共样式style.css或者layout.css不可随意修改
(b).命名一定要语义化，英文字母开头，中划线链接，显示层级关系，例如:<div class="nav"><div class="nav-list"></div></div>;
列举一些命名规则：
头：header
内容：content/container
页脚：footer 导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
左右中：left right center
登录条：loginbar
标志：logo
广告：banner
页面主体：main
热点：hot
新闻：news
下载：download
子导航：subnav
菜单：menu
子菜单：submenu
搜索：search
友情链接：friendlink
(c).良好的注释是非常重要的,制定一致的代码规范，代码块的开始和结束都要加上注释，例如：
/*------------------头部start------------------*/
.header{background-color:#fff;}
/*------------------头部end------------------*/
(d).避免选择器嵌套层级过多，尽量少于 3 级；
(e).尽量避免选择器和 Class、ID 叠加使用；
(f).如果使用 CSS3 的属性，如果有必要加入浏览器前缀，则按照 -webkit-/-moz-/-ms-/-o-/std 的顺序进行添加，标准属性写在最后。
2.2.2 声明顺序
相关的属性声明应当归为一组，并按照下面的顺序排列：
Positioning
Box model
Typographic
Visual
由于定位（positioning）可以从正常的文档流中移除元素，并且还能覆盖盒模型（box model）相关的样式，因此排在首位。盒模型排在第二位，因为它决定了组件的尺寸和位置。
其他属性只是影响组件的内部（inside）或者是不影响前两组属性，因此排在后面。
.declaration-order {
/* Positioning */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 100;
/* Box-model */
display: block;
float: right;
width: 100px;
height: 100px;
/* Typography */
font: normal 13px "Helvetica Neue", sans-serif;
line-height: 1.5;
color: #333;
text-align: center;
/* Visual */
background-color: #f5f5f5;
border: 1px solid #e5e5e5;
border-radius: 3px;
/* Misc */
opacity: 1;
}
2.2.3 媒体查询（Media query）的位置
将媒体查询放在尽可能相关规则的附近。不要将他们打包放在一个单一样式文件中或者放在文档底部。如果你把他们分开了，将来只会被大家遗忘。
.element { ... }
.element-avatar { ... }
.element-selected { ... }
@media (max-width: 768px) {
.element { ...}
.element-avatar { ... }
.element-selected { ... }
}
2.2.4 单行规则声明
对于只包含一条声明的样式，为了易读性和便于快速编辑，建议将语句放在同一行。对于带有多条声明的样式，还是应当将声明分为多行。
/* Single declarations on one line */
.span1 { width: 60px; }
.span2 { width: 140px; }
.span3 { width: 220px; }
/* Multiple declarations, one per line */
.sprite {
display: inline-block;
width: 16px;
height: 15px;
background-image: url(../img/sprite.png);
}
2.2.5 优化
(a).合并margin、padding、border 的-left/-top/-right/-bottom 的设置，尽量使用短名称。
(b).尽量使用简写形式的十六进制值，例如，用 #fff 代替 #ffffff。
(c).避免为 0 值指定单位，例如，用 margin: 0; 代替 margin: 0px;。
(d).对于属性值或颜色参数，省略小于 1 的小数前面的 0
（例如， .5 代替 0.5； -.5px 代替 -0.5px）。
(e).display 属性会影响页面的渲染，请合理使用。
display: inline后不应该再使用 width、height、margin、padding 以及 float；
display: inline-block 后不应该再使用 float；
display: block 后不应该再使用 vertical-align；
display: table-* 后不应该再使用 margin 或者 float；
(f).float在渲染时计算量比较大，尽量减少使用。
(h).如果没有边框时，不要写成border:0，应该写成 border:none 。
2.3 js书写规范
2.3.1 基本准则
(a).书写过程中, 每行代码结束必须有分号;
(b).变量命名: 驼峰式命名. 原生JavaScript变量要求是纯英文字母,首字母须小写,如iTaoLun,严厉禁止拼音；另,要求变量集中声明,避免全局变量.
(c).类命名: 首字母大写, 驼峰式命名. 如 ITaoLun;
(d).函数命名: 首字母小写驼峰式命名. 如 iTaoLun();
(e).boolean 类型的变量使用 is 或 has 开头。例如：
var isReady = false;
var hasMoreCommands = false;
(f).尽量避免使用存在兼容性及消耗资源的方法或属性, 比如 eval() & innerText;
(g).用于调试的console.log用完之后要删掉，否则ie浏览器会报错；
(h).全局变量以及功能性代码一定要写好注释，避免重复代码，提高代码易读性。
2.3.2 jQuery 变量
(a).存放 jQuery 对象的变量以 $ 开头；
(b).将 jQuery 选择器返回的对象缓存到本地变量中复用；
(c).使用驼峰命名变量；
var $myDiv = $("#myDiv");
$myDiv.click(function(){...});
2.3.3 选择器
(a).尽可能的使用 ID 选择器，因为它会调用浏览器原生方法 document.getElementById 查找元素。当然直接使用原生 document.getElementById 方法性能会更好；
(b).在父元素中选择子元素使用 .find() 方法性能会更好, 因为 ID 选择器没有使用到 Sizzle 选择器引擎来查找元素；
// Not recommendedvar
$productIds = $("#products .class");
//Recommendedvar
$productIds = $("#products").find(".class");
2.3.4 事件
(a).对 Ajax 加载的 DOM 元素绑定事件时尽量使用事件委托。事件委托允许在父元素绑定事件，子代元素可以响应事件，也包括 Ajax 加载后添加的子代元素；
// Not recommended
$("#list a").on("click", myClickHandler);
// Recommended
$("#list").on("click", "a", myClickHandler);
2.3.5 链式写法
(a).尽量使用链式写法而不是用变量缓存或者多次调用选择器方法；
(b).当链式写法超过三次或者因为事件绑定变得复杂后，使用换行和缩进保持代码可读性；
$("#myDiv").addClass("error").show();
$("#myLink")
.addClass("bold")
.on("click", myClickHandler)
.on("mouseover", myMouseOverHandler)
.show();
2.3.6 优化
(a).避免不必要的 DOM 操作
浏览器遍历 DOM 元素的代价是昂贵的。最简单优化 DOM 树查询的方案是，当一个元素出现多次时，将它保存在一个变量中，就避免多次查询 DOM 树了。
// Recommendedvar
myList="";
Var myListHTML= document.getElementById("myList").innerHTML;
for (var i = 0; i < 100; i++) {
myList += "<span>" + i + "</span>";
}
myListHTML = myList;
// Not recommended
for (var i = 0; i < 100; i++) {
document.getElementById("myList").innerHTML += "<span>" + i + "</span>";
}
(b).缓存数组长度
循环无疑是和 JavaScript 性能非常相关的一部分。通过存储数组的长度，可以有效避免每次循环重新计算。
注: 虽然现代浏览器引擎会自动优化这个过程，但是不要忘记还有旧的浏览器。
var arr = new Array(1000),
len, i;
// Recommended - size is calculated only 1 time and then stored
for (i = 0, len = arr.length; i < len; i++) {
}
// Not recommended - size needs to be recalculated 1000 times
for (i = 0; i < arr.length; i++) {
}
2.4图片规范
(a).所有页面元素类图片均放入 img 文件夹, 测试用图片放于 img/demoimg 文件夹;
(b). 图片格式仅限于 gif || png || jpg;
(c). 命名全部用小写英文字母 || 数字 || _ 的组合，其中不得包含汉字 || 空格 || 特殊字符；尽量用易懂 的词汇, 便于团队其他成员理解;
(d).在保证视觉效果的情况下选择最小的图片格式与图片质量, 以减少加载时间;
(e). 尽量避免使用半透明的 png 图片(若使用, 请参考 css 规范相关说明);
(f).运用 css sprite 技术集中小的背景图或图标, 减小页面 http 请求, 但注意, 请务必在对应的 sprite psd 源 图中划参考线, 并保存至 img 目录下.
扫一扫
3493
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
