杂项

不允许有空的规则；

元素选择器用小写字母；

去掉小数点前面的0；

去掉数字中不必要的小数点和末尾的0；

属性值'0'后面不要加单位；

同个属性不同前缀的写法需要在垂直方向保持对齐，具体参照右边的写法；

无前缀的标准属性应该写在有前缀的属性后面；

不要在同个规则里出现重复的属性，如果重复的属性是连续的则没关系；

不要在一个文件里出现两个相同的规则；

用 border: 0; 代替 border: none;；

选择器不要超过4层（在scss中如果超过4层应该考虑用嵌套的方式来写）；

发布的代码中不要有 @import；

尽量少用'*'选择器。

  1. /* not good */
  2. .element {
  3. }
  5. /* not good */
  6. LI {
  7.     ...
  8. }
  10. /* good */
  11. li {
  12.     ...
  13. }
  15. /* not good */
  16. .element {
  17.     color: rgba(0, 0, 0, 0.5);
  18. }
  20. /* good */
  21. .element {
  22.     color: rgba(0, 0, 0, .5);
  23. }
  25. /* not good */
  26. .element {
  27.     width: 50.0px;
  28. }
  30. /* good */
  31. .element {
  32.     width: 50px;
  33. }
  35. /* not good */
  36. .element {
  37.     width: 0px;
  38. }
  40. /* good */
  41. .element {
  42.     width: 0;
  43. }
  45. /* not good */
  46. .element {
  47.     border-radius: 3px;
  48.     -webkit-border-radius: 3px;
  49.     -moz-border-radius: 3px;
  51.     background: linear-gradient(to bottom, #fff 0, #eee 100%);
  52.     background: -webkit-linear-gradient(top, #fff 0, #eee 100%);
  53.     background: -moz-linear-gradient(top, #fff 0, #eee 100%);
  54. }
  56. /* good */
  57. .element {
  58.     -webkit-border-radius: 3px;
  59.        -moz-border-radius: 3px;
  60.             border-radius: 3px;
  62.     background: -webkit-linear-gradient(top, #fff 0, #eee 100%);
  63.     background:    -moz-linear-gradient(top, #fff 0, #eee 100%);
  64.     background:         linear-gradient(to bottom, #fff 0, #eee 100%);
  65. }
  67. /* not good */
  68. .element {
  69.     color: rgb(0, 0, 0);
  70.     width: 50px;
  71.     color: rgba(0, 0, 0, .5);
  72. }
  74. /* good */
  75. .element {
  76.     color: rgb(0, 0, 0);
  77.     color: rgba(0, 0, 0, .5);
  78. }