• 杂项

    杂项

    不允许有空的规则；

    元素选择器用小写字母；

    去掉小数点前面的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. }