4 值与单位

4.1 文本

【强制】 文本内容必须用双引号包围，不允许使用单引号；

文本类型的内容可能在选择器、属性值等内容中。

示例：

  1. /* Not so great */
  2. html[lang|=zh] q:before {
  3.     font-family: 'Microsoft YaHei', sans-serif;
  4.     content: '“';
  5. }
  7. /* Better */
  8. html[lang|="zh"] q:after {
  9.     font-family: "Microsoft YaHei", sans-serif;
  10.     content: "“";
  11. }

4.2 数值

【强制】 当数值为 0 - 1 之间的小数时，省略整数部分的 0；

示例：

  1. /* Not so great */
  2. .selector {
  3.     opacity: 0.8;
  4. }
  6. /* Better */
  7. .selector {
  8.     opacity: .8;
  9. }

4.3 长度

【强制】 长度为 0 时须省略单位 (也只有长度单位可省)；

示例：

  1. /* Not so great */
  2. .selector {
  3.     margin: 0px 10px;
  4. }
  6. /* Better */
  7. .selector {
  8.     margin: 0 10px;
  9. }

4.4 url()

【强制】 url() 函数中的路径不加引号；

示例：

  1. /* Not so great */
  2. .selector {
  3.     background: url("bg.png");
  4. }
  6. /* Better */
  7. .selector {
  8.     background: url(bg.png);
  9. }

4.5 颜色

【强制】 RGB颜色值必须使用十六进制记号形式 # rrggbb，不允许使用 rgb()，带有alpha的颜色信息可以使用 rgba()；颜色值不允许使用命名色值；

示例：

  1. /* Not so great */
  2. .selector {
  3.     box-shadow: 0 0 2px rgba(0,128,0,.3);
  4.     border-color: rgb(0, 128, 0);
  5.     color: gray;
  6. }
  8. /* Better */
  9. .selector {
  10.     box-shadow: 0 0 2px rgba(0, 128, 0, .3);
  11.     border-color: # 008000;
  12.     color: # 999;
  13. }

【建议】 颜色值中的英文字符采用小写，至少要保证同一项目内一致；

示例：

  1. /* Not so great */
  2. .selector {
  3.     color: # 0073AA;
  4. }
  6. /* Better */
  7. .selector {
  8.     color: # 0073aa;
  9. }

4.6 2D位置

【强制】 必须同时给出水平和垂直方向的位置；

2D 位置初始值为 0% 0%，但在只有一个方向的值时，另一个方向的值会被解析为 center。为避免理解上的困扰，应同时给出两个方向的值。 background-position属性值的定义

示例：

  1. /* Not so great */
  2. .selector {
  3.     background-position: top; /* 50% 0% */
  4. }
  6. /* Better */
  7. .selector {
  8.     background-position: center top; /* 50% 0% */
  9. }

[⬆]