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