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;