這一期，阿牛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與大家分享部分外掛程式碼，希望能對大家有所用！