前端开发经验之开发规范

前端开发经验之开发规范

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 规范》