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