runfast󰀦lynda

CSS技巧之CSS样式排序

css样式排序

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

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

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

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

常见的CSS定义排序方式

按类型分组排序

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

随着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 编辑器