CSS最佳定义排序方式

CSS样式排序是指按照一定的规则排列CSS样式属性的定义，排序并不会影响CSS样式的功能和性能，只是让代码开起来更加整洁。编写整洁的代码是每个程序员应该追求的目标，但估计有不少的前端程序员没有给CSS样式排序的习惯。CSS代码的逻辑性并不强，一般的开发者写CSS样式也很随意，所以如果不借助工具，不太容易能按照既定的顺序来定义CSS属性，这是前端程序员不给CSS样式属性排序的最主要的原因。

尽管给CSS样式属性排序需要花费一些精力，但从代码的可读性和可维护性方面考虑，这些付出还是值得的。如果CSS属性按照一定的规则排序，开发过程中可以防止属性的重复定义，代码的检查者也能很清晰地查看CSS样式定义，更关键的是后续维护过程中能快速定位特定的样式属性。国外有人做过一个调查，结果有超过60%的开发者有给CSS样式排序。可见业内大部分的开发者对CSS样式属性排序持有肯定的态度，只是在排序的方式上有一定的分歧，有45%的人是按照类型分组排序，有14%的人是按照字母序排列，还有2%的人按照定义的长度排序。下面我们主要讨论按照类型分组排序。

按类型分组排序

这种排序方式最复杂，却也是最合理的方式。国外著名的Web前端专家Andy Ford推荐过一种按照类型分组排序的方式，他把CSS属性分为7大类：

1. 显示与浮动（Diplay&Flow）、
2. 定位（Positioning）、
3. 尺寸（Dimensions）、
4. 边框相关属性（Margins、Padding、Borders、Outline）、
5. 字体样式（Typographic Styles）、
6. 背景（Backgrounds）、
7. 其他样式（Opacity、Cursors、Generated Content）。

随着CSS3的普及，CSS样式中也添加了很多新的属性，这些新的属性也可以按照如上的规则归类到不同的类别中，如：text- shadow可以归类到字体样式中；border-radius可以归类为边框相关属性等。

这种按照样式类型分组排列方式不光是把功能相似的属性归类在一起，并且按照样式功能的重要性从上到下排列。把影响元素页面布局的样式（如：float、margin、padding、height、width等）排到了前面，而把不影响布局的样式（如：background、color、font等）放到了后面。这种按照主次清晰的排列，极大地提高了代码的可维护性。

示例代码

.sample-code {
    display: block;
    float: left;
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 10px;
    padding: 10px;
    border: 1px solid red;
    border-radius: 5px;
    outline: #00ff00 dotted thick;
    font-size: 20px;
    text-shadow: 5px 5px 5px #ff0000;
    background-color: aqua;
    opacity: 1;
    cursor: pointer;
}