**基础**
* 样式采用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,...
~~~