前端规范(2)---Css和Sass编码规范

来源：互联网发布：淘宝如何设置发货地编辑：程序博客网时间：2024/06/14 19:43

Css和Sass编码规范

1、id和class的命名

尽管class(类)和id的语义化对于计算机解析没有什么实际意义，但是id和class就是用以反映元素目的和用途的，最好避免使用一些表象或者晦涩难懂的词语。
~~不推荐~~

.fw-800 {  font-weight: 800;}.red {  color: red;}

推荐

.heavy {  font-weight: 800;}.important {  color: red;}

为选择器添加状态前缀

~~不推荐~~

.withdrawal { background-color: #ccc;}

推荐

.withdrawal { background-color: #ccc;}

2、合理地避免使用ID

一般情况下，ID不应该被应用于样式，不能被复用并且每个页面中只能使用一次ID。

所以，建议始终考虑使用class，而不是id，除非只使用一次。

~~不推荐~~

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

3、CSS选择器中避免标签名

当构建选择器时，应该使用清晰、准确以及有语义的class类名，不要使用标签选择器，这样会使得你的代码更容易维护。

~~不推荐~~

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

推荐

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

4、尽可能地精准

如果开发人员写选择器链的时候，不直接使用子选择器，可能会导致设计问题或者损耗性能。如果你不写很通用的，需要匹配到DOM末端的选择器，你应该总是考虑直接子选择器。

<article class="content news-content">  <span class="title">News event</span>  <div class="content-body">    <div class="title content-title">      Check this out    </div>    <p>This is a news article content</p>    <div class="teaser">      <div class="title">Buy this</div>      <div class="teaser-content">Yey!</div>    </div>  </div></article>

下面的CSS将应用于有title类的全部三个元素。
然后，要解决content类下的title类和 teaser类下的title类下不同的样式，这将需要更精确的选择器再次重写他们的样式。

~~不推荐~~

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

推荐

.content > .title {  font-size: 2rem;}.content > .content-body > .title {  font-size: 1.5rem;}.content > .content-body > .teaser > .title {  font-size: 1.2rem;}

5、缩写属性

~~不推荐~~

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: 0;font: 100%/1.6 palatino, georgia, serif;padding: 0 1em 2em;

6、单位和0

省略“0”值后面的单位。不要在0值后面使用单位，除非有值。
~~不推荐~~
```
padding-bottom: 0px;margin: 0px;
```
推荐
```
padding-bottom: 0;margin: 0;
```
去掉小数点前的“0”
~~不推荐~~
```
font-size: 0.8em;
```
推荐
```
font-size: .8em;
```

7、十六进制表示法

颜色值采用十六进制表示法更加简洁，始终使用小写的十六进制数字。

~~不推荐~~

color: #FF33AA;

推荐

color: #f3a;

8、id和class名的分隔符

使用连字符（中划线）分隔ID和Class（类）名中的单词。
在选择器中不要使用除了连字符（中划线）以为的任何字符（包括没有）来连接单词和缩写。

~~不推荐~~

.demoimage {}.error_status {}

推荐

#video-id {}.ads-sample {}

9、声明顺序

每个声明用分号结束，每个声明换行。

属性名的冒号后空一格。

~~不推荐~~

h3 { font-weight:bold;}

推荐

h3 { font-weight: bold;}

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

~~不推荐~~

a:focus, a:active { position: relative; top: 1px;}

推荐

a:focus,a:active { position: relative;  top: 1px;}

规则之间始终有一个空行（双换行符）分隔。

推荐

html { background: #fff;}body { margin: auto; width: 50%;}

可遵循以下声明顺序：
1. 结构性属性：
  1. display
  2. position, left, top, right etc.
  3. overflow, float, clear etc.
  4. margin, padding
2. 表现性属性：
  1. background, border etc.
  2. font, text

~~不推荐~~

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

推荐

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

10、CSS引号

属性选择器或属性值用双引号（””），而不是单引号（”）括起来。URL值（url()）不要使用引号。

~~不推荐~~

@import url('//cdn.com/foundation.css');html {  font-family: 'open sans', arial, sans-serif;}body:after {  content: 'pause';}

推荐

@import url(//cdn.com/foundation.css);html {  font-family: "open sans", arial, sans-serif;}body:after {  content: "pause";}

11、选择器嵌套（SCSS）

在Sass中你可以嵌套选择器，这可以使代码变得更清洁和可读。嵌套所有的选择器，但尽量避免嵌套没有任何内容的选择器。

~~不推荐~~

//没有嵌套，不推荐.content {  display: block;}.content > .news-article > .title {  font-size: 1.2em;}//不推荐，嵌套无用的内容.content {  display: block;  > .news-article {    > .title {      font-size: 1.2em;    }  }}

推荐

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

12、嵌套中引入空行（SCSS）

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

~~不推荐~~

.content {  display: block;  > .news-article {    background-color: #eee;    > .title {      font-size: 1.2em;    }    > .article-footnote {      font-size: 0.8em;    }  }}

推荐

.content {  display: block;  > .news-article {    background-color: #eee;    > .title {      font-size: 1.2em;    }    > .article-footnote {      font-size: 0.8em;    }  }}

13、上下文媒体查询(SCSS)

在Sass中，当你嵌套你的选择器时也可以使用上下文媒体查询。
在Sass中，你可以在任何给定的嵌套层次中使用媒体查询。
由此生成的CSS将被转换，这样的媒体查询将包裹选择器的形式呈现。

~~不推荐~~

// This mobile first example looks like plain CSS where the whole structure of SCSS is repeated// on the bottom in a media query. This is error prone and makes maintenance harder as it's not so easy to relate// the content in the media query to the content in the upper part (mobile style).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;    }  }}

推荐

/ This is the same example as above but here we use contextual media queries in order to put the different styles// for different media into the right context..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;    }  }}

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

以下内容是一个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;    }  }}

阅读全文

0 0