CSS技巧之CSS样式排序

css样式排序

CSS样式排序是指按照一定的规则排列CSS样式属性的定义，CSS样式排序有如下优点：

• 有助于保持你的编码风格。

为了保持一致性，这对于长期项目，在这种代码下不断进行编辑，改写非常重要的。

• 帮助你理解的代码。

你写的代码，你的同事或其他程序员会预见的排序，因此，更容易理解。

• 找到CSS属性更快。

你会知道一个CSS属性确切位置，将减少的不必要的努力。

常见的CSS定义排序方式

按类型分组排序

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

• 显示与浮动（Diplay&Float）
• 定位（Position）
• 尺寸（Width、Height）
• 边框相关属性（Margins、Padding、Borders）
• 字体样式（ont）
• 背景（Background）
• 其他样式（Opacity、Cursors、Generated Content）。

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

按字母序排列

按字母序排列的方式也是CSS排序中使用较多的一种方式。相比较于前一种方式， 这种方式的优点是排列规则简单。按字母序排列的规则是按照属性的首字母从A到Z排列， 忽略浏览器前缀（如：-webkit-、-moz-、-o-以及-ms-）。如下是一个按照字母序排列的例子：

#div {
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    color: #FFF;  
    font-family: "Times New Roman", serif;  
    font-weight: bold;  
    height: 100px;  
    line-height: 20px;  
    width: 100px;  
}

按定义长度排序

这种排序方式是使用较少的一种方式。 和按照字母序排列的方式类似，这种方式是按照样式定义的字符长度排列。 排列的方式可以从长到短，也可以是从短到长。如下的例子将按照定义由长到短排列：

#element {
    font-family: "Times New Roman", serif;  
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    font-weight: bold;  
    line-height: 20px;  
    height: 300px;  
    width: 100px;  
    color: #FFF;  
    top: 10px;  
}

以上三种常见的CSS排序方式中，第一种最为合理，代码的可读性和可维护性也是最好的，但是规则相对复杂。其余两种方式规则简单，但仅仅是让代码看起来更整洁，并没有提高多少代码的可维护性。在实际的应用中，推荐使用第一种排列方式。

工具

纯粹是靠前端工程师在编写代码过程中按照一定的规则来排列CSS是很麻烦的， 最佳的方式是在编写代码过程中按照最有效率的方式来编写， 在编写完成并提交代码时使用工具给CSS排序。 这样即提高了开发效率又方便了后续代码的阅读和维护。 推荐一款免费的CSS排序工具：CSScomb 。CSScomb提供了在线工具及主流代码编辑器的插件。如果你想使用它，下载相应的插件即可。

例如：我使用的是sublime text 编辑器

• cmd+shift+p 打开命令板
• 输入install package
• 输入CSScomb单击下载