css-sass代码规范.md 6.3 KB

Raw Blame History Permalink



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/Compass规则


总体规则


按功能和组件划分提取模块
不希望被编译的模块文件名使用下划线_开头
所有命名(Variables，Extend，Mixin等)全部使用小写字母，若有多个单词使用中划线-连接
Nest层级不可超过3层
表达式规则与Js的表达式规则保持一致，操作符左右留空格保持格式一致


@import规则


@import引用模块时，模块名使用" "包裹并省略文件后缀；
需要引用多个模块时，使用,分隔，,后留空格；
@import与样式体之间需留空行


Mixin规则


参数()与mixin name之间无空格；
参数列表分隔的,后留空格，参数项若有默认值，:后留空格，前无空格
mixin的左括号{前留空格
@include的mixin若需要传参数，参数列表的()与mixin name之间无空格，列表参数以,分隔，,后留空格
@include需要的参数列表过长时，可考虑带上键名，这样就可以忽略传参顺序


@extend最佳实践

禁止使用后代选择器去继承css规则

//SCSS
.foo .bar {
    @extend .baz;
}
.bip .baz {
    color: red;
}

//CSS
.bip .baz, .bip .foo .bar, .foo .bip .bar {
  color: red;
}


Tip: SASS要保证应用到baz的样式也要用到bar，因此会生成不必要的选择器组合去覆盖各种情况


Nest规则


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

//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块应具有的顺序：


当前选择器的样式属性
父级选择器的伪类选择器 (:first-letter, :hover, :active etc)
伪类元素 (:before and :after)
父级选择器的声明样式 (.selected, .active, .enlarged etc.)
用Sass的上下文媒体查询
子选择器作为最后的部分


代码示例：

//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;
    }
  }
}


参考资料