css / sass代码规范

选择器

• 使用class进行样式匹配，而不是id和标签
• 避免使用属性选择器，会影响浏览器性能
• 控制选择器长度，每个组合应该控制在3个以内
• 尽可能精确的元素定位

规则细节

.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

媒体查询

媒体查询的位置靠近他们相关的规则。

//GOOD
@media (min-width: 480px) {
    .media-element {
        //some attr
    }
}

前缀属性

使用前缀属性时，通过缩进使取值垂直对齐。

//GOOD
.selector {
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.5);
            box-shadow: 0 1px 2px rgba(0,0,0,.5); 
}

---

SASS规则

选择器嵌套

避免不必要的嵌套。只有在需要给父元素增加样式并且有多个子元素时才考虑嵌套

//GOOD
.content {
    display: block;
    > .news-article > .title {
        font-size: 1.2em;
    }
}

//BAD
.content {
    display: block;

    > .news-article {
        > .title {
            font-size: 1.2em;
        }
    }
}

嵌套中引入 空行

嵌套选择器和CSS属性之间空一行。

//GOOD
.content {
    display: block;
    //SPACE HERE
    > .news-article {
        background-color: #eee;
    }
}

嵌套顺序

当使用Sass的嵌套功能的时候，重要的是有一个明确的嵌套顺序，以下内容是一个scss块应具有的顺序：

1. 当前选择器的样式属性
2. 父级选择器的伪类选择器 (:first-letter, :hover, :active etc)
3. 伪类元素 (:before and :after)
4. 父级选择器的声明样式 (.selected, .active, .enlarged etc.)
5. 用Sass的上下文媒体查询

6. 子选择器作为最后的部分

   //GOOD
   .product-teaser {
     // 1. Style attributes
     display: inline-block;
     padding: 1rem;
     background-color: whitesmoke;
     color: grey;
   
     // 2. Pseudo selectors with parent selector
     &:hover {
       color: black;
     }
   
     // 3. Pseudo elements with parent selector
     &:before {
       content: "";
       display: block;
       border-top: 1px solid grey;
     }
   
     &:after {
       content: "";
       display: block;
       border-top: 1px solid grey;
     }
   
     // 4. State classes with parent selector
     &.active {
       background-color: pink;
       color: red;
   
       // 4.2. Pseuso selector in state class selector
       &:hover {
         color: darkred;
       }
     }
   
     // 5. Contextual media queries
     @media screen and (max-width: 640px) {
       display: block;
       font-size: 2em;
     }
   
     // 6. Sub selectors
     > .content > .title {
       font-size: 1.2em;
   
       // 6.5. Contextual media queries in sub selector
       @media screen and (max-width: 640px) {
         letter-spacing: 0.2em;
         text-transform: uppercase;
       }
     }
   }

参考资料