书写顺序

1. 不强制要求声明的书写顺序。

如果团队规范有要求,建议使用工具来自动化排序,比如 CSScomb,或者使用 @wangjeaf 开发的 ckstyle
推荐以声明的特性作为分组,不同分组间保留一个空行,例如:

  1. .dialog {
  2. /* 定位 */
  3. margin: auto;
  4. position: absolute;
  5. top: 0;
  6. bottom: 0;
  7. right: 0;
  8. left: 0;
  9. /* 盒模型 */
  10. width: 500px;
  11. height: 300px;
  12. padding: 10px 20px;
  13. /* 皮肤 */
  14. background: #FFF;
  15. color: #333;
  16. border: 1px solid;
  17. border-radius: 5px;
  18. }

2. 无前缀属性一定要写在最后

由于 CSS 后面的属性会覆盖前面的,无前缀属性写在最后可以保证浏览器一旦支持了,则用标准的无前缀属性来渲染。

不推荐的写法:

  1. .foo {
  2. -webkit-border-radius: 6px;
  3. border-radius: 6px;
  4. -moz-border-radius: 6px;
  5. }

推荐的写法:

  1. .foo {
  2. -webkit-border-radius: 6px;
  3. -moz-border-radius: 6px;
  4. border-radius: 6px;
  5. }