# 前端編碼規范
## 命名規則
### 文件目錄命名
采用小寫+下劃線方式，命名要精簡，最好用一個單詞
例：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（深灰色）
