css代码规范

选择器

• 使用class进行样式匹配，而不是id和标签
• 尽量避免使用属性选择器
• 尽可能精确的元素定位

规则细节

.ele-header,  /*规则1：每个选择器声明总是使用新的一行*/
.ele-body,
.ele-footer {   /*规则2：'{' 前需要添加1个空格*/
    line-height: 1.2; /*规则3：样式声明以;结束，每个样式声明独占一行*/
    font-weight: normal;  /*规则4：属性声明的:后添加1个空格*/
    margin: 0;  /*规则5：属性值为0时不添加单位*/
    background-color: #f3d; /*规则6：十六进制小写和缩写*/
}
/*规则7：没组选择器声明之间适用一空行间隔*/
.ele2 {
    font-family: "open sans", arial, sans-serif; /*规则8：使用" "，而不是' '*/ 
    padding: 0 1em 2em; /*规则9：适当缩写但不滥用*/
    border-top: 1px;
    background-color: rgba(0,0,0,.5); /*规则10：颜色值rgba等中不需要增加空格，并且去除浮点数前面不必要的0*/
}

声明顺序(不做强制要求，尽量实现)

这是一个选择器内书写CSS属性顺序的大致轮廓，作为最佳实践，我们应该遵循以下顺序：

• Position属性 (position,top,right,z-index...)
• Box Model属性 (display,float,width...)
• Typographic属性 (font,line-height,color,text-align...)
• Visual属性 (background,border,border-radius...)

因为Position属性可以是一个元素脱离正常的文本流并可以覆盖盒模型相关样式，所以Position排第一位。盒模型决定一个元素位置和大小紧跟其后。后面属性属于元素内部或不会对前两者产生影响的，排在后面。

完整属性顺序参考Recsss

Sass风格

• 控制嵌套层级，禁止超过5层，尽量控制在3层以内