Feat: 增加样式规范

Author: calvin

frontend/code-standards/样式书写规范.md

@@ -0,0 +1,215 @@
+# 样式规范参考
+
+### 1. 基本原则
+
+- 尽量避免使用`important`
+- 尽量避免在各种地方给元素定高定宽，尽量使用继承和计算
+- **尽量避免使用第三方框架的选择器去定义样式，因为第三方框架如果升级会破坏掉期望效果或者很有可能你会把原有样式覆盖掉，切记！**
+- 在less里面，选择器的嵌套尽量不要超过3层
+- 在各个组件的特定less里面，记得在外面套上`:host`，以避免污染全局
+- 界面上的各元素尽量保持对齐
+- 避免滥用`z-index`，使用整百来管理z-index：100, 200, 300, 400, 500, 600, 700，每个数字代表的就是对应的层级，如：100代表上浮一层，200上浮两层。理论上同一个试图，层级不应该过多，建议不超过4层。
+- 当元素需要浮动的时候，要给它的父容器清除浮动，请使用`.clearfix`工具类
+
+### 2. 间距
+
+由于使用了ng-zorro，我们可以统一采用ng-zorro的规范，最小值(xs)为8px，中间值(md)为16px，最大值(lg)为24px，所有相邻的视图元素之间必须要有合适的间距，不允许在UI界面上出现紧挨在一块的组件。
+
+- [间距说明](https://ng-alain.com/theme/tools/zh#%E9%97%B4%E8%B7%9D)
+- 相应的一些工具类参考[ng-alain](https://ng-alain.com/theme/tools/zh)，尽量使用工具类，避免重复定义。
+- [栅格系统](https://ng.ant.design/components/grid/zh)
+
+在写样式的时候，需要注意ng-zorro和ng-alain的基本组件其实都已经提供了默认的间距，避免覆盖掉这些默认行为。
+
+
+
+### 3. 通用
+
+- [**强制**] 属性定义必须另起一行。
+
+    示例：
+
+    ```less
+    /* good */
+    .selector {
+        margin: 0;
+        padding: 0;
+    }
+
+    /* bad */
+    .selector { margin: 0; padding: 0; }
+    ```
+
+- [**强制**] 属性定义后必须以分号结尾。
+
+    示例：
+
+    ```less
+    /* good */
+    .selector {
+        margin: 0;
+    }
+
+    /* bad */
+    .selector {
+        margin: 0
+    }
+    ```
+
+
+
+- [**强制**] 当一个 rule 包含多个 selector 时，每个选择器声明必须独占一行。
+
+  示例：
+
+  ```less
+  /* good */
+  .post,
+  .page,
+  .comment {
+      line-height: 1.5;
+  }
+  
+  /* bad */
+  .post, .page, .comment {
+      line-height: 1.5;
+  }
+  ```
+
+- [**强制**] `>`、`+`、`~` 选择器的两边各保留一个空格。
+
+  示例：
+
+  ```less
+  /* good */
+  main > nav {
+      padding: 10px;
+  }
+  
+  label + input {
+      margin-left: 5px;
+  }
+  
+  input:checked ~ button {
+      background-color: #69C;
+  }
+  
+  /* bad */
+  main>nav {
+      padding: 10px;
+  }
+  
+  label+input {
+      margin-left: 5px;
+  }
+  
+  input:checked~button {
+      background-color: #69C;
+  }
+  ```
+
+- [**强制**] 如无必要，不得为 `id`、`class` 选择器添加类型选择器进行限定。
+
+  解释：
+
+  在性能和维护性上，都有一定的影响。
+
+  示例：
+
+  ```less
+  /* good */
+  #error,
+  .danger-message {
+      font-color: #c00;
+  }
+  
+  /* bad */
+  dialog#error,
+  p.danger-message {
+      font-color: #c00;
+  }
+  ```
+
+- [**建议**] 在可以使用缩写的情况下，尽量使用属性缩写。
+
+  示例：
+
+    ```less
+    /* good */
+    .post {
+        font: 12px/1.5 arial, sans-serif;
+    }
+  
+    /* bad */
+    .post {
+        font-family: arial, sans-serif;
+        font-size: 12px;
+        line-height: 1.5;
+    }
+    ```
+
+- [**强制**] 当数值为 0 - 1 之间的小数时，省略整数部分的 `0`。
+
+    示例：
+
+    ```less
+    /* good */
+    panel {
+        opacity: .8
+    }
+
+    /* bad */
+    panel {
+        opacity: 0.8
+    }
+    ```
+
+- [**强制**] `url()` 函数中的路径不加引号。
+
+    示例：
+
+    ```less
+    body {
+        background: url(bg.png);
+    }
+    ```
+
+- [**建议**] `url()` 函数中的绝对路径可省去协议名。
+
+    示例：
+
+    ```less
+    body {
+        background: url(//baidu.com/img/bg.png) no-repeat 0 0;
+    }
+    ```
+
+- [**强制**] 长度为 `0` 时须省略单位。 (也只有长度单位可省)
+
+    示例：
+
+    ```less
+    /* good */
+    body {
+        padding: 0 5px;
+    }
+
+    /* bad */
+    body {
+        padding: 0px 5px;
+    }
+    ```
+
+- [**建议**] `line-height` 在定义文本段落时，应使用数值。
+
+    解释：
+
+    将 line-height 设置为数值，浏览器会基于当前元素设置的 font-size 进行再次计算。在不同字号的文本段落组合中，能达到较为舒适的行间间隔效果，避免在每个设置了 font-size 都需要设置 line-height。
+
+    当 line-height 用于控制垂直居中时，还是应该设置成与容器高度一致。
+
+    ```less
+    .container {
+        line-height: 1.5;
+    }
+    ```