这一期，阿牛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与大家分享部分插件代码，希望能对大家有所用！
转载：https://blog.csdn.net/Niushop_mi/article/details/109186502