CSS 编码规范

CSS 编码规范

文件

CSS 文件使用 UTF-8 编码。

• 样式文件必须写上 @charset 规则，并且一定要在样式文件的第一行首个字符位置开始写，编码名用 UTF-8
• 字符 @charset; 都用小写字母，不能出现转义符，编码名允许大小混写

@charset "UTF-8";

缩进

使用 4 个空格做为一个缩进层级，不允许使用 2 个空格 或 tab 字符。

示例：

.selector {
     
    margin: 0;
    padding: 0;
}

空格

• 选择器 与 { 之间必须包含空格。

  示例：

  .selector {
         
  }
  

• 属性名 与之后的 : 之间不允许包含空格， : 与 属性值 之间必须包含空格。

  示例：

  margin: 0;
  

• 列表型属性值 书写在单行时，, 后必须跟一个空格。

  示例：

  font-family: Arial, sans-serif;
  

注释

注释统一用 /* */（scss中也不要用//）；缩进与下一行代码保持一致；当位于一个代码行的末尾，与代码间隔一个空格。

示例：

/* header */
.header {
     
    ...
}

.header {
     
    /* 50px */
    width: 50px;
    color: red; /* color red */
}

选择器

• 当一个 rule 包含多个 selector 时，每个选择器声明必须独占一行。

  示例：

  /* good */
  .post,
  .page,
  .comment {
         
      line-height: 1.5;
  }
  
  /* bad */
  .post, .page, .comment {
         
      line-height: 1.5;
  }
  

• >、+、~ 选择器的两边各保留一个空格。

  示例：

  /* good */
  main > nav {
         
      padding: 10px;
  }
  
  label + input {
         
      margin-left: 5px;
  }
  
  input:checked ~ button {
         
      background-color: #69C;
  }
  
  /* bad */
  main>nav {
         
      padding: 10px;
  }
  
  label+input {
         
      margin-left: 5px;
  }
  
  input:checked~button {
         
      background-color: #69C;
  }
  

• 属性选择器中的值必须用双引号包围。

  示例：

  /* good */
  article[character="juliet"] {
         
      voice-family: "Vivien Leigh", victoria, female
  }
  
  /* bad */
  article[character='juliet'] {
         
      voice-family: "Vivien Leigh", victoria, female
  }
  

属性

• 属性定义必须另起一行。

  示例：

  /* good */
  .selector {
         
      margin: 0;
      padding: 0;
  }
  
  /* bad */
  .selector {
          margin: 0; padding: 0; }
  

• 属性定义后必须以分号结尾。

  示例：

  /* good */
  .selector {
         
      margin: 0;
  }
  
  /* bad */
  .selector {
         
      margin: 0
  }
  

• 在可以使用缩写的情况下，尽量使用属性缩写。

  示例：

  /* good */
  .post {
         
      font: 12px/1.5 arial, sans-serif;
  }
  
  /* bad */
  .post {
         
      font-family: arial, sans-serif;
      font-size: 12px;
      line-height: 1.5;
  }
  

属性书写顺序（建议）

相关的属性声明应当归为一组，并按照下面的顺序排列：

• Positioning - 定位属性
• Box model - 盒模型属性
• Typographic - 排版属性
• Visual - 视觉属性
• Misc - 其它属性

由于定位（positioning）可以从正常的文档流中移除元素，并且还能覆盖盒模型（box model）相关的样式，因此排在首位。

盒模型排在第二位，因为它决定了组件的尺寸和位置。

其他属性只是影响组件的内部（inside）或者是不影响前两组属性，因此排在后面。

完整的属性列表及其排列顺序请参考 Recess。

示例：

.selector {
     
    /* Positioning */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    /* Box-model */
    display: block;
    float: right;
    width: 100px;
    height: 100px;
    /* Typography */
    font: normal 13px "Helvetica Neue", sans-serif;
    line-height: 1.5;
    color: #333;
    text-align: center;
    /* Visual */
    background-color: #f5f5f5;
    border: 1px solid #e5e5e5;
    border-radius: 3px;
    /* Misc */
    opacity: 1;
}

值与单位

• 当属性值为 0 - 1 之间的小数时，省略整数部分的 0。

  示例：

  /* good */
  panel {
         
      opacity: .8
  }
  
  /* bad */
  panel {
         
      opacity: 0.8
  }
  

• 属性值为 0 时须省略单位。

  示例：

  /* good */
  body {
         
      padding: 0 5px;
  }
  
  /* bad */
  body {
         
      padding: 0px 5px;
  }
  

• RGB颜色值必须使用十六进制记号形式 #rrggbb ，使用 rgba() 时每个逗号后必须保留一个空格。

  示例：

  /* good */
  .success {
         
      box-shadow: 0 0 2px rgba(0, 128, 0, .3);
      border-color: #008000;
  }
  
  /* bad */
  .success {
         
      box-shadow: 0 0 2px rgba(0,128,0,.3);
      border-color: rgb(0, 128, 0);
  }
  

• 颜色值可以缩写时，必须使用缩写形式。

  示例：

  /* good */
  .success {
         
      background-color: #aca;
  }
  
  /* bad */
  .success {
         
      background-color: #aaccaa;
  }
  

• 颜色值不允许使用命名色值。

  示例：

  /* good */
  .success {
         
      color: #90ee90;
  }
  
  /* bad */
  .success {
         
      color: lightgreen;
  }
  

• 颜色值中的英文字符采用小写。如不用小写也需要保证同一项目内保持大小写一致。

  示例：

  /* good */
  .success {
         
      background-color: #aca;
      color: #90ee90;
  }
  
  /* good */
  .success {
         
      background-color: #ACA;
      color: #90EE90;
  }
  
  /* bad */
  .success {
         
      background-color: #ACA;
      color: #90ee90;
  }
  

Class 命名

采用 BEM 的命名规范

BEM 分别表示 Block （块）， Element （元素）和 Modifier （修饰状态）。

• Block 是页面中独立存在的区块，可以在不同场合下被重用；每个页面都可以看做是多个 Block 组成。

• Element 是构成 Block 的元素，只有在对应 Block 内部才具有意义，是依赖于 Block 的存在。

• Modifier 是描述 Block 或 Element 的属性或状态；同一个 Block 或 Element 可以有多个 Modifier 。

在选择器中，由以下三种符号来表示扩展的关系：

- 中划线：仅作为连字符使用，表示某个块 、某个子元素或状态的多单词之间的连接记号。

__ 双下划线：双下划线用来连接块和块的子元素。

-- 双横线：双横线用来描述一个块或者块的子元素的一种状态。

is-xxx：表示一种业务逻辑。

type-block__element--modifier

组件之间的完全解耦，不会造成命名空间的污染，如：.block-xxx ul li 的写法带来的潜在的嵌套风险。

BEM 命名会使得 Class 类名变长，但经过压缩后这个带宽开销可以忽略不计。

/* normal */
.list-ranking {
     }

.list-ranking.select {
     }

.list-ranking .item {
     }

.list-ranking .item.active {
     }

/* BEM */
.list-ranking {
     } /* block */

.list-ranking--select {
     } /* block modifier*/

.list-ranking__item {
     } /* block element */

.list-ranking__item--large {
     } /* block element modifier*/

.list-ranking__item.is-active {
     } /*一种状态*/

"list-ranking list--select">
    
"list-ranking__item list-ranking__item--large">
    
"list-ranking__item is-active">
    
"list-ranking__item">
    
"list-ranking__item">
    
"list-ranking__item">

.END

参考：
[译]谷歌 HTML/CSS 规范
代码规范