Niushop前端CSS及JavaScript編碼規範

這一期，阿牛ger與大家分享Niushop開源商城系統前端代碼CSS和JavaScript編碼規範。

CSS編碼規範

分號

每個屬性聲明末尾都要加分號。

引號

最外層統一使用雙引號；

url的內容要用引號；

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

例：

.logo{

background-image: url("logo.png");

}

li[data-type="single"] {

...

}

命名

類名使用小寫字母，以中劃線分隔；

id採用駝峰式命名；

scss中的變量、函數、混合、placeholder採用駝峰式命名；

例：

/* class */

.element-content {

...

}

/* id */

#myDlalog{

...

}

/* 變量 */

$colorBlack: #000;

/* 函數 */

@function pxToRem($px) {

...

}

/* 混合 */

@mixin centerBlock {

...

}

/* placeholder */

%myDialog {

...

}

屬性簡寫

margin 和 padding 儘量用簡寫；

常見的屬性簡寫包括：

font

background

transition

animation

雜項

不允許有空的規則；

元素選擇器用小寫字母；

去掉小數點前面的0；

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

屬性值'0'後面不要加單位；

無前綴的標準屬性應該寫在有前綴的屬性後面；

不要在同個規則裡出現重複的屬性，如果重複的屬性是連續的則沒關係；

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

用border: 0;代替border: none；

儘量少用'*'選擇器；

JavaScript編碼規範

分號

為了保障代碼的穩定性，每行代碼都要加分號

命名

由於後端使用的是PHP語言，為了方便統一，js中的變量命名採用小寫+下劃線的方式，跟php變量名保持一致；

函數採用駝峰式命名；

常量全大寫，用下劃線連接；

構造函數採用駝峰式命名，首字母大寫；

jquery對象必須以'$'開頭命名；

變量聲明

變量聲明：var（禁止用let，兼容性不好）；

常量聲明：const；

數組、對象

對象屬性名不需要加引號；

例：

var a = {b: 1};

數組、對象最後不要有逗號。

字體圖標

在使用圖片時，優先使用字體圖標，減少代碼體積，運行效率

字體圖標統一在iconfont.css中維護

Niushop單商戶V4商城系統前端代碼規範就與大家分享完啦！下期阿牛ger與大家分享部分插件代碼，希望能對大家有所用！