属性缩写与分拆

  • 无继承关系时，使用缩写

不推荐：

  1. body {
  2. 　　　margin-top: 10px;
  3. 　　　margin-right: 10px;
  4. 　　　margin-bottom: 10px;
  5. 　　　margin-left: 10px;
  6. }

推荐：

  1. body {
  2. 　　　margin: 10px;
  3. }
  • 存在继承关系时，使用分拆方式

不推荐：

  1. .m-detail {
  2. 　　　font: bold 12px/1.5 arial, sans-serif;
  3. }
  4. .m-detail .info {
  5. 　　　font: normal 14px/1.5 arial, sans-serif;
  6. }

要避免错误的覆盖：

  1. .m-detail .info {
  2. 　　　font: 14px sans;
  3. }

如果你只是想改字号和字体，然后写成了上面这样，这是错误的写法，因为 font 复合属性里的其他属性将会被重置为 user agent 的默认值，比如 font-weight 就会被重置为 normal。

推荐：

  1. .m-detail {
  2. 　　　font: bold 12px/1.5 arial, sans-serif;
  3. }
  4. .m-detail .info {
  5. 　　　font-weight: normal;
  6. 　　　font-size: 14px;
  7. }

在存在继承关系的情况下，只将需要变更的属性重定义，不进行缩写，避免不需要的重写的属性被覆盖定义

  • 根据规则条数选择缩写和拆分

不推荐：

  1. .m-detail {
  2. 　　　border-width: 1px;
  3. 　　　border-style: solid;
  4. 　　　border-color: #000 #000 #f00;
  5. }

推荐：

  1. .m-detail {
  2. 　　　border: 1px solid #000;
  3. 　　　border-bottom-color: #f00;
  4. }