# CSS格式化规则

## 声明顺序

按字母顺序排列声明。

css文件书写按字母顺序排列的方式，容易记忆和维护，以达到一致的代码。

在排序时忽略浏览器特定的前缀。但是，特定 CSS 属性的多个浏览器前缀应按字母顺序排列（如 -moz 书写在 -webkit 前面）。

```css
background: fuchsia;
border: 1px solid;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
color: black;
text-align: center;
text-indent: 2em;
```

## 块内容的缩进

缩进块内容。

将包括嵌套及声明的 [块内容](http://www.w3.org/TR/CSS21/syndata.html#block) 进行缩进，以体现层次并提高可读性。

```css
@media screen, projection {

  html {
    background: #fff;
    color: #444;
  }

}
```

## 声明结束 
   
每个属性后使用分号结束。

以分号结束每个属性，提高一致性和可扩展性。

````{warning}
```css
/* 不推荐 */
.test {
  display: block;
  height: 100px
}
```
````
```css
/* 推荐 */
.test {
  display: block;
  height: 100px;
}
```

## CSS 属性名结束  
   
属性名称的冒号后有一个空格。

为保证一致性，在属性名与属性值之间添加一个空格（但是属性名和冒号间没有空格）。

````{warning}
```css
/* 不推荐 */
h3 {
  font-weight:bold;
}
```
````
```css
/* 推荐 */
h3 {
  font-weight: bold;
}
```

## 声明块间隔
   
在选择器和后面的声明块之间使用一个空格。

最后一个选择器与表示 [声名块](http://www.w3.org/TR/CSS21/syndata.html#rule-sets) 开始的左大花括号在同行，中间有一个字符空格。
   
表示开始的左大花括号和选择器在同行。

````{warning}
```css
/* 不推荐：缺少空间 */
#video{
  margin-top: 1em;
}
  
/* 不推荐：不必要的换行符 */
#video{
  margin-top: 1em;
}
```
````
```css
/* 推荐 */
#video {
  margin-top: 1em;
}
```

## 选择器及声明分离  
   
每个选择器和声明独立成行。

总是让每个选择器和声明单独成行。

````{warning}
```css
/* 不推荐 */
a:focus, a:active {
  position: relative; top: 1px;
}
```
````
```css
/* 推荐 */
h1,
h2,
h3 {
  font-weight: normal;
  line-height: 1.2;
}
```

## CSS 代码块分离
   
使用新空行分离规则。

始终把一个空行（两个换行符）放在代码块规则之间。

```css
html {
  background: #fff;
}

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

## CSS 引号

属性选择器和属性值中使用单引号。
   
在属性选择器及属性值中使用单引号（`''`）而不是双引号（`""`）。在 ``url()`` 中不要使用引号。

特例：如果你确实需要定义 ``@charset`` ，由于 [不允许使用单引号](http://www.w3.org/TR/CSS21/syndata.html#charset) ，故请使用双引号。

````{warning}
```css
/* 不推荐 */
@import url("https://www.google.com/css/maia.css");

html {
  font-family: "open sans", arial, sans-serif;
}
```
````
```css
/* 推荐 */
@import url(https://www.google.com/css/maia.css);

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