1属性书写顺序

  • 遵循先布局后内容的顺序。
  1. .g-box {
  2. 　　　display: block;
  3. 　　　float: left;
  4. 　　　width: 500px;
  5. 　　　height: 200px;
  6. 　　　margin: 10px;
  7. 　　　padding: 10px;
  8. 　　　border: 10px solid;
  9. 　　　background: #aaa;
  10. 　　　color: #000;
  11. 　　　font: 14px/1.5 sans-serif;
  12. }

这个应该好理解，比如优先布局，我们知道布局属性有 display, float, overflow 等等；内容次之，比如 color, font, text-align 之类。

  • 组概念。

拿上例的代码来说，如果我们还需要进行定位及堆叠，规则我们可以改成如下：

  1. .g-box {
  2. 　　　display: block;
  3. 　　　position: relative;
  4. 　　　z-index: 2;
  5. 　　　top: 10px;
  6. 　　　left: 100px;
  7. 　　　float: left;
  8. 　　　width: 500px;
  9. 　　　height: 200px;
  10. 　　　margin: 10px;
  11. 　　　padding: 10px;
  12. 　　　border: 10px solid;
  13. 　　　background: #aaa;
  14. 　　　color: #000;
  15. 　　　font: 14px/1.5 sans-serif;
  16. }

从代码中可以看到，我们直接将z-index, top, left 紧跟在 position 之后，因为这几个属性其实是一组的，如果去掉position，则后3条属性规则都将失效。

  • 私有属性在前标准属性在后
  1. .g-box {
  2. 　　　-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
  3. 　　　-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
  4. 　　　-o-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
  5. 　　　box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
  6. }

当有一天你的浏览器升级后，可能不再支持私有写法，那么这时写在后面的标准写法将生效，避免无法向后兼容的情况发生。