zh-google-styleguide/google-html-css-styleguide/css_formatting_rules.rst

CSS格式化规则

声明顺序

按字母顺序排列声明。

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

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

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

块内容的缩进

缩进块内容。

将包括嵌套及声明的 块内容 进行缩进，以体现层次并提高可读性。

@media screen, projection {

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

}

声明结束

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

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

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

/* 推荐 */
.test {
  display: block;
  height: 100px;
}

CSS属性名结束

属性名称的冒号后有一个空格。

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

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

/* 推荐 */
h3 {
  font-weight: bold;
}

声明块间隔

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

最后一个选择器与表示 声名块 开始的左大花括号在同行，中间有一个字符空格。

表示开始的左大花括号和选择器在同行。

/* 不推荐：缺少空间 */
#video{
  margin-top: 1em;
}


/* 不推荐：不必要的换行符 */
#video
{
  margin-top: 1em;
}

/* 推荐 */
#video {
  margin-top: 1em;
}

选择器及声明分离

每个选择器和声明独立成行。

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

/* 不推荐 */
a:focus, a:active {
  position: relative; top: 1px;
}

/* 推荐 */
h1,
h2,
h3 {
  font-weight: normal;
  line-height: 1.2;
}

CSS代码块分离

使用新空行分离规则。

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

html {
  background: #fff;
}


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

CSS引号

属性选择器和属性值中使用单引号。

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

特例：如果你确实需要定义 @charset ，由于 不允许使用单引号 ，故请使用双引号。

/* 不推荐 */
@import url("//www.google.com/css/maia.css");

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

/* 推荐 */
@import url(//www.google.com/css/maia.css);

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