**基礎**
* 樣式采用sass語法
* 樣式以zqui為命名空間
* 不使用ID選擇器
* 使用rem作為字號長度單位
* line-height 不加單位
* 聲明的最后一行仍然添加分號
**避免不必要的 CSS 選擇符嵌套**
* Class 已經模塊化命名,從類名上已經可以清晰的分辨元素的從屬,一般情況下也不會造成類名沖突,沒有必要再進行選擇器嵌套,保持 css 結構清晰,提高渲染效率。特殊情況可以嵌套(如提高權重、主題之間代碼隔離),但應避免過多層級。
~~~
/* 推薦寫法 */
.zqui-dialog {
border: 1px solid #333;
}
.zqui-dialog__hd {
margin: 0;
padding: 5px 10px;
border-bottom: 1px solid #333;
background-color: #CCC;
}
.zqui-dialog__bd {
margin: 10px;
}
/* 不推薦寫法 */
.zqui-dialog .zqui-dialog__hd {}
.zqui-dialog .zqui-dialog__bd {}
~~~
**屬性的書寫順序**
~~~
位置:position,left,right,float
盒模型屬性:display,margin,padding,width,height
邊框與背景:border,background
段落與文本:line-height,text-indent,font,color,text-decoration,...
其他屬性:overflow,cursor,visibility,...
~~~