前端开发经验之开发规范
1. 从规范说起
刚开始接触前台的开发时，大多数人都只是以实现功能为主，代码无规范，这种情况下发现代码常见问题：
（1）实现比较繁琐，完全堆代码，代码整洁度很差；
（2）注释比较少，不容易理解，不容易维护；
（3）全局变量比较多，容易被其它全局命名空间里的代码所修改（如第三方库，window 引用），影响代码质量。
由此可见，规范是最基本，也是最重要的。下面例子介绍：有效运用CSS+HTML
冗余的HTML代码:
<div style=”width:20px; height:20px; color:blue;background:#ffffff; border:1px solid #ed5565;”></div>
推荐
优化的CSS+HTML代码:
<style>
.divStyle{
width: 20px;
height: 20px;
color: blue;
background: #ffffff;
border: 1px solid #ed5565;
}
</style>
<div class=”divStyle”></div>
2. HTML
基本语法规范
1．用两个空格来代替制表符（tab） – 这是唯一能保证在所有环境下获得一致展现的方法。
2．嵌套元素应当缩进一次（即两个空格）。
3．对于属性的定义，确保全部使用双引号，绝不要使用单引号。
4．不要省略可选的结束标签（closing tag）（例如，</li> 或 </body>）。
尽量遵循 HTML 标准和语义，网站http://www.runoob.com/html/html-tutorial.html。任何时候都要尽量使用最少的标签并保持最小的复杂度。
属性顺序
HTML 属性应当按照以下给出的顺序依次排列，确保代码的易读性。
· class
· id, name
· data-*
· src, for, type, href
· title, alt
· aria-*, role
class 用于标识高度可复用组件，因此应该排在首位。id 用于标识具体组件，应当谨慎使用（防止页面id重复），因此排在第二位。如：
<a class="..." id="..." data-modal="toggle" href="#">link</a>
JavaScript 生成页面标签
通过 JavaScript 生成的标签让内容变得不易查找、编辑，并且降低性能。能避免时尽量避免。
3. CSS
基本语法规范
1．用两个空格来代替制表符（tab） – 这是唯一能保证在所有环境下获得一致展现的方法。
2．为选择器分组时，将单独的选择器单独放在一行。
3．为了代码的易读性，在每个声明块的左花括号前添加一个空格。
4．声明块的右花括号应当单独成行。
5．每条声明语句的 : 后应该插入一个空格。
6．为了获得更准确的错误报告，每条声明都应该独占一行。
7．所有声明语句都应当以分号结尾。最后一条声明语句后面的分号是可选的，但是，如果省略这个分号，你的代码可能更易出错。
8．对于以逗号分隔的属性值，每个逗号后面都应该插入一个空格（例如，box-shadow）。
9．对于属性值或颜色参数，省略小于 1 的小数前面的 0 （例如，.5 代替 0.5；-.5px 代替 -0.5px）。
10．十六进制值应该全部小写，例如，#fff。在扫描文档时，小写字符易于分辨，因为他们的形式更易于区分。
11．尽量使用简写形式的十六进制值，例如，用 #fff 代替 #ffffff。
12．为选择器中的属性添加双引号，例如，input[type="text"]。只有在某些情况下是可选的，但是，为了代码的一致性，建议都加上双引号。
13．避免为 0 值指定单位，例如，用 margin: 0; 代替 margin: 0px;。
声明顺序
相关的属性声明应当归为一组，并按照下面的顺序排列：
1. Positioning定位
2. Box model盒模型
3. Typographic排版
4. 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;
}
单行规则声明
对于只包含一条声明的样式，为了易读性和便于快速编辑，建议将语句放在同一行。对于带有多条声明的样式，还是应当将声明分为多行。
这样做的关键因素是为了错误检测 – 例如，CSS 校验器指出在 183 行有语法错误。如果是单行单条声明，你就不会忽略这个错误；如果是单行多条声明的话，你就要仔细分析避免漏掉错误了。
Less 和 Sass 中的嵌套
避免非必要的嵌套。这是因为虽然你可以使用嵌套，但是并不意味着应该使用嵌套。只有在必须将样式限制在父元素内（也就是后代选择器），并且存在多个需要嵌套的元素时才使用嵌套。
// 没有嵌套
.table > thead > tr > th { … }
.table > thead > tr > td { … }
// 有嵌套
.table > thead > tr {
> th { … }
> td { … }}
注释
代码是由人编写并维护的。请确保你的代码能够自描述、注释良好并且易于他人理解。好的代码注释能够传达上下文关系和代码目的。不要简单地重申组件或 class 名称。
对于较长的注释，务必书写完整的句子；对于一般性注解，可以书写简洁的短语。
/* Bad example */
/* Modal header */
.modal-header {
...}
/* Good example */
/* .modal-title 和 .modal-close的包装元素 */
.modal-header {
...}
class 命名
1．class 名称中只能出现小写字符和破折号（dashe）（不是下划线，也不是驼峰命名法）。破折号应当用于相关 class 的命名（类似于命名空间）（例如，.btn 和 .btn-danger）。
2．避免过度任意的简写。.btn 代表 button，但是 .s 不能表达任何意思。
3．class 名称应当尽可能短，并且意义明确。
基于最近的父 class 或基本（base） class 作为新 class 的前缀。
/* Bad example */
.t { ... }
.header { ... }
/* Good example */
.tweet { ... }
.tweet-header { ... }
4. JavaScript/JQuery
《HeadFirst Jquery》书中说过一句话，我觉得很贴切。
“CSS+HTML控制页面如何构建和显示（静态页面），而JQuery/JavaScript控制页面行为（动态页面）。”注：JQuery是一个专门用来动态改变页面的JavaScript库。
基本规范
具体规范可参考我的资源里面提供的《JavaScript 规范.docx》