moffee's blog

想要编写出专业、易懂具有很好的编码思维的CSS样式文件，是需要花一定的精力来学习的。52CSS.com提供了丰富的教程供大家浏览。

现在需要强调的是编码的顺序问题，这是一个非常微小的细节问题，但涉及到团队协作以及让您的编码更加工整，强烈推荐以一定的顺序来进行编码。

看下面的例子：

代码A：
#main {
    font-size:13px;
    width:500px;
    background:url(http://www.52css.com/logo.jpg) no-repeat 20px 200px;
    height:600px;
    line-height:22px;
    color:#c00;
    float:left;
    margin:10px 0 15px 0;
}
代码B：
#main {
float:left;
width:500px;
height:600px;
margin:10px 0 15px 0;
background:url(http://www.52css.com/logo.jpg) no-repeat 20px 200px;
color:#c00;
font-size:13px;
line-height:22px;
}

我们发现，代码B明显要比代码A工整很多，这样在修改样式时可以很快的找到相关属性，进而进行调整。而代码A看上去很杂乱，如果定义的属性足够多，根本不清楚写在了什么地方。以代码B的形式按一定的次序进行编码也有利于团队协作共同开发。

52CSS.com推荐的CSS编码顺序分为三类，分别如下：

一、显示与定位
display
position
float
list-style

二、元素自身
width
height
margin
padding
border
background

三、文本外观
color
font
line-height
text-align
text-decoration
other

这样编码或许短时间内察觉不出什么优势，但如果在大的项目开发中加以运用会发挥强大的作用，代码看起来很舒服，修改容易，团队成员或后续交接会很顺利的进行。在平常的编码中，应该良好的编码习惯。这非常重要！