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

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

一、 命名規(guī)范

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

目錄命名：參照項目命名規(guī)則；有復(fù)數(shù)結(jié)構(gòu)時，要采用復(fù)數(shù)命名法。例：scripts, styles

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

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

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

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

業(yè)務(wù)類：BEM思想，block__element--modifier。例如：person__hand--left

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

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

二、 HTML規(guī)范 2.1 html頭部聲明統(tǒng)一

1、 DTD聲明

2、頁面編碼統(tǒng)一

3、meta聲明

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

移動端注明：

4、引入CSS, JS

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

HTML5 規(guī)范鏈接：使用link，使用style，使用script

2.2 風格與易讀性

1、格式縮進

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

2、模塊注釋

html較大獨立模塊之間注釋格式統(tǒng)一使用：

或者：

2.3 標簽與屬性

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

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

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

// 禁止
 或 


// 推薦

3、標簽屬性順序

屬性應(yīng)該按照特定的順序出現(xiàn)以保證易讀性；

class

id

name

data-*

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

placeholder, title, alt

aria-*, role

required, readonly, disabled

class是為高可復(fù)用組件設(shè)計的，所以應(yīng)處在第一位；

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

4、boolean屬性

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

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

    1

2.4 雜項

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

// 禁止


// 推薦


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

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

3、減少標簽數(shù)量

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

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

三、 CSS代碼規(guī)范 3.1 CSS引用規(guī)范

1、所有CSS均為外部調(diào)用，不得在頁面書寫任何內(nèi)部樣式或行內(nèi)樣式；

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

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

3.2 CSS注釋規(guī)范

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

@charset "utf-8";

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

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

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

/* @info 商品信息區(qū) -----------------------------------------------------------*/
.infoArea{}

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

/* @price 商品價格區(qū) ----------------------------------------------------------*/
.price{}

3.3 CSS字符規(guī)范

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

以下幾種情況需要空行

/**
 * 文件最后保留一個空行
 * "}"后最好跟一個空行，包括scss中嵌套的規(guī)則
 * 屬性之間需要適當?shù)目招校唧w見屬性聲明順序
 **/

.element {
    ...
}

.dialog {
    color: red;

    &:after {
        ...
    }
}

4、空格

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

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

5、引號

最外層統(tǒng)一使用雙引號；

url的內(nèi)容要用引號；

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

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

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

3.4 樣式中屬性

1、排序規(guī)則：先外部 > 再自身 > 后內(nèi)部

推薦工具CSScomb，sublime 和 vscode 均有對應(yīng)插件

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

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

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

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

 E. 生成內(nèi)容的屬性（content, list-style, quotes等）

2、屬性簡寫

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

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、不允許有空的規(guī)則；

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

3、去掉小數(shù)點前面的0；

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

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

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

7、無前綴的標準屬性應(yīng)該寫在有前綴的屬性后面；

8、不要在同個規(guī)則里出現(xiàn)重復(fù)的屬性，如果重復(fù)的屬性是連續(xù)的則沒關(guān)系；

9、不要在一個文件里出現(xiàn)兩個相同的規(guī)則；

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

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

12、發(fā)布的代碼中不要有 @import；

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

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

1、引入格式：

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

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

  
    
頁面內(nèi)容….
    
  

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