css 下划线_Niushop前端CSS及JavaScript编码规范

这一期,阿牛ger与大家分享Niushop开源商城系统前端代码CSS和JavaScript编码规范。

c87ebd04db60a9ab9aca6c96d86146dc.png

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;
尽量少用'*'选择器;

a84067c0009702a98586e552689e181c.png

JavaScript编码规范分号
为了保障代码的稳定性,每行代码都要加分号命名
由于后端使用的是PHP语言,为了方便统一,js中的变量命名采用小写+下划线的方式,跟php变量名保持一致;
函数采用驼峰式命名;
常量全大写,用下划线连接;
构造函数采用驼峰式命名,首字母大写;
jquery对象必须以'$'开头命名;变量声明
变量声明:var(禁止用let,兼容性不好);
常量声明:const;数组、对象
对象属性名不需要加引号;
例:
var a = {b: 1};
数组、对象最后不要有逗号。字体图标
在使用图片时,优先使用字体图标,减少代码体积,运行效率
字体图标统一在iconfont.css中维护

6f7384c959010b02a7480e36e0ca8d91.png


Niushop单商户V4商城系统前端代码规范就与大家分享完啦!下期阿牛ger与大家分享部分插件代码,希望能对大家有所用!
文章来自转载

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
相关推荐
©️2020 CSDN 皮肤主题: 1024 设计师:白松林 返回首页