前端开发规范：3-CSS

尽量使用缩写属性

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;

border-top: none;

font: 100%/1.6 palatino, georgia, serif;

padding: 0 1em 2em;

省略“0”值后面的单位

声明顺序

结构性属性：

display

position, left, top, right etc.

overflow, float, clear etc.

margin, padding

表现性属性：

background, border etc.

font, text

使用分号结束声明，每个选择器/属性都使用新的一行

属性冒号后使用一个空格

.test {

display: block;

height: 100px;

}

scss避免嵌套没有任何内容的选择器

不推荐

.content {

display: block;

.news-article {

.title {

font-size: 1.2em;

}

}

}

推荐

.content {

display: block;

.news-article > .title {

font-size: 1.2em;

}

}

上下文媒体查询

媒体查询可以嵌套在选择器中

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

}

}

嵌套顺序和父级选择器(SCSS)

当前选择器的样式属性

父级选择器的伪类选择器 (:first-letter, :hover, :active etc)

伪类元素 (:before and :after)

父级选择器的声明样式 (.selected, .active, .enlarged etc.)

用Sass的上下文媒体查询

子选择器作为最后的部分

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

}

}