# 前端编码规范
## 命名规则
### 文件目录命名
采用小写+下划线方式，命名要精简，最好用一个单词
例：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/](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（深灰色）
