这一期，阿牛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与大家分享部分插件代码，希望能对大家有所用！