多应用+插件架构,代码干净,二开方便,首家独创一键云编译技术,文档视频完善,免费商用码云13.8K 广告
**基础** * 样式采用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,... ~~~