摘要：雜項用代替里一定要有的判斷不要在內置對象的原型上添加方法，如不要在內層作用域的代碼里聲明了變量，之后卻訪問到了外層作用域的同名變量變量不要先使用后聲明不要在一句代碼中單單使用構造函數，記得將其賦值給某個變量不要在同個

決定綜合網上的規范整出一套自己的開發規范出來，以后代碼的風格均按照要求來編排，方便管理維護

一、 命名規范

項目命名：全部采用小寫方式， 以下劃線分隔，例：my_project_name

目錄命名：參照項目命名規則；有復數結構時，要采用復數命名法。例：scripts, styles

JS文件命名：參照項目命名規則。例：account_model.js

CSS, SCSS文件命名：參照項目命名規則。例：retina_sprites.scss

HTML文件命名：參照項目命名規則。例：error_report.html

CSS命名：
通用類：使用小寫字母，以中劃線分隔。例：element-content

業務類：BEM思想，block__element--modifier。例如：person__hand--left

另外：SCSS中的變量、函數、混合、placeholder采用駝峰式命名

ID命名：采用駝峰式命名。例：colorBlack

二、 HTML規范 2.1 html頭部聲明統一

1、 DTD聲明

2、頁面編碼統一

3、meta聲明

PC端注明: IE兼容/keywords/description

移動端注明：

4、引入CSS, JS

根據HTML5規范, 通常在引入CSS和JS時不需要指明 type，因為 text/css 和 text/javascript 分別是他們的默認值

HTML5 規范鏈接：使用link，使用style，使用script

2.2 風格與易讀性

1、格式縮進

html編碼統一格式化顯示，使用一個Tab鍵進行分層縮進 (2個空格寬度)，使整個頁面結構層次清晰，方便閱讀和修改。

2、模塊注釋

html較大獨立模塊之間注釋格式統一使用：

或者：

2.3 標簽與屬性

1、由于html標簽和屬性不區別大小寫，所有建議都采用小寫，尤其是自定義標簽和屬性名，否定js中取不到，如：

$("div").data("bgColor");  // 取不到，已自動被瀏覽器轉成了data-bgcolor

2、所有html屬性必須添加雙引號（非單引號）。

// 禁止
 或 


// 推薦

3、標簽屬性順序

屬性應該按照特定的順序出現以保證易讀性；

class

id

name

data-*

src, for, type, href, value , max-length, max, min, pattern

placeholder, title, alt

aria-*, role

required, readonly, disabled

class是為高可復用組件設計的，所以應處在第一位；

id更加具體且應該盡量少使用，所以將它放在第二位

4、boolean屬性

boolean屬性指不需要聲明取值的屬性，XHTML需要每個屬性聲明取值，但是HTML5并不需要；

boolean屬性的存在表示取值為true，不存在則表示取值為false。

    1

2.4 雜項

1、所有標簽必須采用合理嵌套。

// 禁止


// 推薦


// 禁止inline級標簽嵌套block級標簽

2、img標簽中必須添加alt屬性。如：

3、減少標簽數量

在編寫HTML代碼時，需要盡量避免多余的父節點；

很多時候，需要通過迭代和重構來使HTML變得更少。

三、 CSS代碼規范 3.1 CSS引用規范

1、所有CSS均為外部調用，不得在頁面書寫任何內部樣式或行內樣式；

2、html頁面引入樣式文件：

統一使用link標簽，少用@import（原生import有加載性能問題），sass、less、vue.js等文件使用import命令除外（因為最終前端構建工具會將引入文件編譯成一個css文件）。

3.2 CSS注釋規范

1、css頭部文檔注釋( 統一加上@charset聲明 )，如下：

@charset "utf-8";

/**
 * @created : 2017/09/15 
 * @author : Mr.Wang 
 * @version : v1.0 
 * @desc : XX模塊 
 **/

關于"version"，如果對代碼有修改更新version版本號，并添加相關注釋。

2、內部模塊之間注釋（建議 @模塊英文名，好查找）：

/* @info 商品信息區 -----------------------------------------------------------*/
.infoArea{}

/* 單行注釋 */
.specArea{}

/* @price 商品價格區 ----------------------------------------------------------*/
.price{}

3.3 CSS字符規范

1、縮進：使用soft tab（2個空格）；
2、分號：每個屬性聲明末尾都要加分號；
3、空行:

以下幾種情況需要空行

/**
 * 文件最后保留一個空行
 * "}"后最好跟一個空行，包括scss中嵌套的規則
 * 屬性之間需要適當的空行，具體見屬性聲明順序
 **/

.element {
    ...
}

.dialog {
    color: red;

    &:after {
        ...
    }
}

4、空格

以下幾種情況不需要空格	以下幾種情況需要空格
屬性名后	屬性值前
多個規則的分隔符","前	選擇器">", "+", "~"前后
!important "!"后	"{"前
屬性值中"("后和")"前	!important "!"前
行末不要有多余的空格	屬性值中的","后
注釋"/*"后和"*/"前

/* 示例代碼 */
.element,
.dialog {
  color: red !important;
  background-color: rgba(0, 0, 0, .5);
}

5、引號

最外層統一使用雙引號；

url的內容要用引號；

屬性選擇器中的屬性值需要引號。

.element:after {
    content: "";
    background-image: url("logo.png");
}

li[data-type="single"] {
    ...
}

3.4 樣式中屬性

1、排序規則：先外部 > 再自身 > 后內部

推薦工具CSScomb，sublime 和 vscode 均有對應插件

 A. 影響文檔流的屬性（display, position, float, clear, visibility, table-layout等）

 B. 自身盒模型的屬性（width, height, margin, padding, border等）

 C. 排版相關屬性（font, line-height, text-align, text-indent, vertical-align等）

 D. 裝飾性屬性（color, background, opacity, cursor等）

 E. 生成內容的屬性（content, list-style, quotes等）

2、屬性簡寫

屬性簡寫需要你非常清楚屬性值的正確順序，而且在大多數情況下并不需要設置屬性簡寫中包含的所有值，所以建議盡量分開聲明會更加清晰；

margin 和 padding 相反，需要使用簡寫；

常見的屬性簡寫包括：font background transition animation

/* not good */
.element {
    transition: opacity 1s linear 2s;
}

/* good */
.element {
    transition-delay: 2s;
    transition-timing-function: linear;
    transition-duration: 1s;
    transition-property: opacity;
}

3.5 雜項

1、不允許有空的規則；

2、元素選擇器用小寫字母；

3、去掉小數點前面的0；

4、去掉數字中不必要的小數點和末尾的0；

5、屬性值"0"后面不要加單位；

6、同個屬性不同前綴的寫法需要在垂直方向保持對齊，具體參照右邊的寫法；

7、無前綴的標準屬性應該寫在有前綴的屬性后面；

8、不要在同個規則里出現重復的屬性，如果重復的屬性是連續的則沒關系；

9、不要在一個文件里出現兩個相同的規則；

10、用 border: 0; 代替 border: none;；

11、選擇器不要超過4層（在scss中如果超過4層應該考慮用嵌套的方式來寫）；

12、發布的代碼中不要有 @import；

13、盡量少用"*"選擇器。

三、 JavaScript規范（jslint/eslint） 3.1 JS文件引用

1、引入格式：

腳本語言發展至今，也只有js混的最好了，所以type="text/javascript"類型指定可以省去。

2、引入位置： body標簽內最后部（非body外面）, 減少因載入腳本而造成其他頁面內容阻塞的問題（js單線程）。

  
    
頁面內容….
    
  

3、引入方式：html頁面中禁止直接編寫js代碼，統一使用