>因在項目中使用的是 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在渲染時計算量比較大，盡量減少使用
```
