>因在项目中使用的是 Vant 开源的移动端组件库，所以在 Css 编写中 我们更倾向于 less 语法。如果在管理平台例如使用 " element ui " 时 请遵循 api 规范使用 scss 这里不做强制要求，视情况而定。
>下面会针对页面样式编写的过程中进行规范展示。
<br />
```
保持代码的简洁，使用属性缩写，不必要的值不用写
/* 不推荐 */
div {
transition: all 1s;
top: 50%;
margin-top: -10px;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 20px;
padding-left: 10px;
}
/* 推荐使用 */
div {
transition: 1s;
top: calc(50% - 10px);
padding: 5px 10px 20px;
}
```
```
当使用带有前缀的属性时，通过缩进的方式，让每个属性的值在垂直方向对齐，这样便于多行编辑
.selector {
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
box-shadow: 0 1px 2px rgba(0,0,0,.15);
}
```
```
声明顺序 相关属性应为一组，推荐的样式编写顺序
.div {
/* Positioning */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 100;
/* Box model */
display: block;
box-sizing: border-box;
width: 100px;
height: 100px;
padding: 10px;
border: 1px solid #e5e5e5;
border-radius: 3px;
margin: 10px;
float: right;
overflow: hidden;
/* Typographic */
font: normal 13px "Helvetica Neue", sans-serif;
line-height: 1.5;
text-align: center;
/* Visual */
background-color: #f5f5f5;
color: #fff;
opacity: .8;
/* Other */
cursor: pointer;
}
```
```
有多个声明块共享命名空间时必须使用嵌套书写，避免选择器的重复
/* 不推荐 */
.main .title {
font-weight: 700;
}
.main .content {
line-height: 1.5;
}
.main {
.warning {
font-weight: 700;
}
.comment-form {
#comment:invalid {
color: red;
}
}
}
/* 推荐使用 */
.main {
.title {
font-weight: 700;
}
.content {
line-height: 1.5;
}
.warning {
font-weight: 700;
}
}
#comment:invalid {
color: red;
}
```
```
Less 的变量值总是以同一作用域下最后一个同名变量为准，务必注意后面的设定会覆盖所有之前的设定。
变量命名采用 '@foo-bar' 形式，不使用 '@fooBar' 形式
/* 不推荐 */
@sidebarWidth: 200px;
@width:800px;
/* 推荐使用 */
@sidebar-width: 200px;
@width: 800px;
```
```
使用less父选择器 & 伪类属性建议采用父选择器写法代替传统写法
/* 不推荐 */
a {
color: #fff;
}
a:hover {
color: #ddd;
}
/* 推荐使用 */
a {
color: #fff;
&:hover {
color: #ddd;
}
}
```
```
在定义 mixin 时，如果 mixin 名称不是一个需要使用的 className，加上括号，否则即使不被调用也会输出到 CSS 中
/* 不推荐 */
big-text {
font-size: 2em;
}
h3 {
.big-text;
}
/* 推荐使用 */
.big-text() {
font-size: 2em;
}
h3 {
.big-text();
}
```
<br />
>01\. 不建议轻易改动核心样式库，公用样式库， 和通用 CSS 库，改动后，要经过全面测试。
02\. 每个 style 标签都应该具有scoped属性，要么使用 BEM 约定。减少穿透选择器的应用。
03\. 样式结尾不能漏写分号。
04\. 样式指明，尽可能不要出现重复代码，让选择器更精准，减少iD，避免使用 !important 进行样式覆盖，覆盖样式会使维护和调试更困难，所以要尽量避免。
05\. 单位尽可能减少固定值，固定宽高比。用内外边距以及百分比 em rem 等单位代替，时间单位用 s 比 ms 好。
06\. 层级 (z-index) 必须清晰明确，页面弹窗、气泡为最高级（最高级为999），不同弹窗气泡之间可在三位数之间调整；普通区块为10-90内10的倍数；禁止层级间盲目攀比。
07\. 对于 > + ~ 选择器的两边各保留一个空格，行缩进使用2个空格。
08\. 不随意使用 ID， ID 的优先级高于 CLASS，且 ID 是唯一，按照需求使用，不滥用。
09\.将嵌套深度限制在2级。对于超过3级的嵌套，给予重新评估。这可以避免出现过于详实的CSS选择器，避免大量的嵌套规则。当可读性受到影响时，将之打断。推荐避免出现多于20行的嵌套规则出现。
<br />
## :-: 性能优化
```
慎重选择高消耗的样式 高消耗属性在绘制前需要浏览器进行大量计算
box-shadows
border-radius
transparency
transforms
CSS filters（慎用）
```
```
正确使用 Display 的属性 Display 属性会影响页面的渲染，请合理使用
display: inline后不应该再使用 width、height、margin、padding 以及 float
display: inline-block 后不应该再使用 float
display: block 后不应该再使用 vertical-align
display: table-\* 后不应该再使用 margin 或者 float
* 不滥用 Float Float在渲染时计算量比较大，尽量减少使用
```
