Niushop单商户V4 前端编码规范

命名规则

文件目录命名

采用小写+下划线方式，命名要精简，最好用一个单词

例：addon

JS文件命名

采用小写+下划线方式

例：common.js

CSS文件命名

采用小写+下划线方式

例：common.css

HTML文件命名

采用小写+下划线方式

例：index.html

HTML

规范

1、缩进使用soft tab（4个空格）；

2、嵌套的节点应该缩进；

3、在属性上，使用双引号，不要使用单引号；

4、属性名全小写，用中划线做分隔符，例：data-name；

5、不要忽略可选的关闭标签，例：</li>和</body>

引用CSS，JS

根据HTML5规范, 通常在引入CSS和JS时不需要指明 type，因为 text/css 和 text/javascript 分别是他们的默认值，可以省略。

css要写在{block name=”resources”}{/block}中

例：

{block name=”resources”}

<link rel=”stylesheet” href=”login.css” />

{/block}

js要写在{block name=”script”}{/block}中

例：

{block name=”script”}

<script>

…

</script>

{/block}

减少标签嵌套

在编写HTML代码时，需要尽量避免多余的父节点；

尽量遵循HTML标准和语义，任何时候都要用尽量小的复杂度和尽量少的标签来解决问题。

代码分离

HTML、CSS、JS要最大化分离，一个功能对应一个JS、CSS文件，复杂功能除外，如果某个功能img、js比较多，那就单独建立一个文件夹。

每个功能页面中不能有太多内联样式。

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中维护

如果没有满足的图标，可以进行添加

https://www.iconfont.cn/

类名引用

文字尺寸

ns-font-size-sm（12px）

ns-font-size-base(14px)

ns-font-size-lg(16px)

文字颜色

ns-text-color (主色调)

ns-text-color-red(红色) 用于提示

ns-text-color-black（黑色）

ns-text-color-gray（灰色）

ns-text-color-light-gray(浅灰色)

ns-text-color-dark-gray（深灰色）

边框颜色

ns-border-color（主色调）

ns-border-color-gray（灰色）

背景颜色

ns-bg-color（主色调）

ns-bg-color-gray（灰色）

ns-bg-color-light-gray(浅灰色)

ns-bg-color-dark-gray（深灰色）