css-sass代码规范.md 9.33 KB

Raw Blame History Permalink



css / sass代码规范


id和class命名

id和class总是使用可以反应元素目的和用途的名称，或其他通用名称。而不使用表象或者晦涩难懂的名称。

//GOOD
.heavy {
    font-weight: 800;
}

.important {
    color: red;
}

//BAD
.fw-800 {
    font-weight: 800;
}

.red {
    color: red;
}


合理的避免使用id

一般情况下id不应该被应用于样式，id选择器权重很高，样式很难被覆盖

//GOOD
.content .title {
    font-size: 2em;
}

//BAD
#content .title {
    font-size: 2em;
}


CSS选择器中避免标签名

当构建选择器时应该使用清晰、准确和有语义的class名，而不使用标签选择器。从分离的角度考虑,在表现层中不应该分配html标记/语义。

//GOOD
.content > .content-header > .title {
    font-size: 2em;
}

//BAD
div.content > header.content-header > h2.title {
    font-size: 2em;
}


尽可能的精确

很多前端开发人员写选择器链的时候不使用直接子选择器（区别于后代选择器）。有时，这可能会导致疼痛的设计问题并且有时候可能会很耗性能。然而，在任何情况下，这是一个非常不好的做法。如果你不写很通用的，需要匹配到DOM末端的选择器， 你应该总是考虑直接子选择器。


缩写属性

CSS提供了各种缩写属性（如 font 字体）应该尽可能使用，即使在只设置一个值的情况下。使用缩写属性对于代码效率和可读性是有很有用的。

//GOOD
border-top: 0;
font: 100%/1.6 palatino, georgia, serif;
padding: 0 1em 2em;

//BAD
border-top-style: none;
font-family: palatino, georgia, serif;
font-size: 100%;
line-height: 1.6;
padding-bottom: 2em;
padding-left: 1em;
padding-right: 1em;
padding-top: 0;


0和单位

省略“0”值后面的单位。不要在0值后面使用单位，除非有值。

//GOOD
padding-bottom: 0;
margin: 0;

//BAD
padding-bottom: 0px;
margin: 0em;


十六进制表示法

始终使用小写以及简写的十六进制数字

//GOOD
color: #f3a;

//BAD
color: #FF33AA;


id和class名的分隔符

使用连字符（-）分隔id和class名中的单词。

//GOOD
.video-id {}
.ads-sample {}

//BAD
.demoimage {}
.error_status {}


声明顺序

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


结构性属性：
display,
position, left, top, right,
overflow, float, clear,
margin, padding
...

表现性属性：
background, border,
font, text
...

//GOOD
.box {
    display: block;
    position: absolute;
    left: 30%;
    right: 30%;
    overflow: hidden;
    margin: 1em;
    padding: 1em;
    background-color: #eee;
    border: 3px solid #ddd;
    font-family: 'Arial', sans-serif;
    font-size: 1.5rem;
    text-transform: uppercase;
}


声明结束

为了保证一致性和可扩展性，每个声明应该用分号结束，每个声明换行。

//GOOD
.test {
    display: block;
    height: 100px;
}

//BAD
.test {
    display: block; height: 100px
}


属性名结束

属性名的冒号后使用一个空格。出于一致性的原因，属性和值（但属性和冒号之间没有空格）的之间始终使用一个空格。

//GOOD
h3 {
    font-weight: bold;
}

//BAD
h3 {
    font-weight:bold;
}


选择器和声明分离

每个选择器和属性声明总是使用新的一行。

//GOOD
h1,
h2,
h3 {
    font-weight: normal;
    line-height: 1.2;
}
//BAD
a:focus, a:active {
    position: relative; top: 1px;
}


规则分隔

规则之间始终有一个空行分隔。

//GOOD
html {
  background: #fff;
}

body {
  margin: auto;
  width: 50%;
}


CSS引号

属性选择器或属性值用双引号（""），而不是单引号（''）括起来。URI / URL不要使用引号。

//GOOD
@import url(//cdn.com/foundation.css);

html {
  font-family: "open sans", arial, sans-serif;
}

body:after {
  content: "pause";
}

//BAD
@import url('//cdn.com/foundation.css');

html {
  font-family: 'open sans', arial, sans-serif;
}

body:after {
  content: 'pause';
}


SASS嵌套规则


选择器嵌套

在Sass中你可以嵌套选择器，这可以使代码变得更清洁和可读。嵌套所有的选择器，但尽量避免嵌套没有任何内容的选择器。如果你需要指定一些子元素的样式属性，而父元素将不使用什么样式属性，可以使用常规的CSS选择器链。

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

    > .news-article {
        background-color: #eee;

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

        > .article-footnote {
            font-size: 0.8em;
        }
    }
}


上下文媒体查询

在Sass中，当你嵌套你的选择器时也可以使用上下文媒体查询，你可以在任何给定的嵌套层次中使用媒体查询。

//GOOD
.content-page {
  font-size: 1.2rem;

  @media screen and (min-width: 641px) {
    font-size: 1rem;
  }

  > .main {
    background-color: whitesmoke;

    > .latest-news {
      padding: 1rem;

      > .news-article {
        padding: 1rem;

        > .title {
          font-size: 2rem;

          @media screen and (min-width: 641px) {
            font-size: 3rem;
          }
        }
      }
    }

    > .content {
      margin-top: 2rem;
      padding: 1rem;
    }
  }

  > .page-footer {
    margin-top: 2rem;
    font-size: 1rem;

    @media screen and (min-width: 641px) {
      font-size: 0.8rem;
    }
  }
}

//BAD 
.content-page {
  font-size: 1.2rem;

  > .main {
    background-color: whitesmoke;

    > .latest-news {
      padding: 1rem;

      > .news-article {
        padding: 1rem;

        > .title {
          font-size: 2rem;
        }
      }
    }

    > .content {
      margin-top: 2rem;
      padding: 1rem;
    }
  }

  > .page-footer {
    margin-top: 2rem;
    font-size: 1rem;
  }
}

@media screen and (min-width: 641px) {
  .content-page {
    font-size: 1rem;

    > .main > .latest-news > .news-article > .title {
      font-size: 3rem;
    }

    > .page-footer {
      font-size: 0.8rem;
    }
  }
}


嵌套顺序和父级选择器

当使用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;
    }
  }
}


参考资料