我们在书写css编码时，往往会率性而为，没有遵循一定的规范。自己想到哪就写哪，要用什么属性的时候就写什么属性。但这种做法往往会导致一些不良后果。对此，我们课课家网站对CSS编码顺序问题进行了研究，下面和大家分享一下。
或许你还是觉得编码顺序没有什么重要。对于个人而言可能真看不出什么影响。但如果是一个团队，那就很容易出现你写的代码别人很难看懂的状况。
不相信？我们不妨来看看下面两则代码：
代码一
#main{
font-size:13px;
width:500px;
background:url(http://www.inlco.cn/wenjian/link/linklogo3.gif) no-repeat 20px 200px;
height:600px;
line-height:22px;
color:#c00;
float:left;
margin:10px 0 15px 0;
}
代码二
#main{
float:left;
width:500px;
height:600px;
margin:10px 0 15px 0;
background:url(http://www.inlco.cn/wenjian/link/linklogo3.gif) no-repeat 20px 200px;
color:#c00;
font-size:13px;
line-height:22px;
}
我们发现，代码二明显要比代码一工整很多，这样在修改样式时可以很快的找到相关属性，进而进行调整。而代码一看上去很杂乱，如果定义的属性足够多，根本不清楚写在了什么地方。如果你是团队的一份子你更愿意选择哪种方案呢?代码二是吧！因为代码二的形式按一定的次序进行编码，这样有利于团队协作共同开发。
由此可见万事都要有一个顺序。对此，我们课课家网站给大家推荐一个CSS编码顺序，具体如下：
1、定位：其中有的属性为：position z-index left right top bottom clip
2、尺寸：其中属性为：width height min-height max-height min-width max-width
3、文字：其中属性有：color font-size letter-spacing color-text-align
4、背景：其中属性有：background-image border
5、其他：一般有：animation transition等
此外，编码顺序还涉及另一方面的问题。
众所周知，最后定义的CSS样式将会覆盖在其之前定义的所有已经存在、或与之冲突的样式。
比如下面这个例子：
p{color:red;background:yellow}
p{color:green}
以上的段落最终将呈现绿色的字体，并带有黄色的背景，这是因为最后定义的color:green将之前定义的red覆盖掉了，至于黄色背景为何没有消失，那是因为第二个p的定义中并没有与之冲突的定义，因此它还是有效的。
由此可见，编码的顺序在一定程度上会影响我们的样式定义效果。如果我们在编码时不注意顺序，那么显示出来的样式就不是你心中所想了。
综合以上所述，我们不难看出CSS编码顺序在Web开发过程中的重要性，但在实际操作中，大家往往会忽略它，不知道正在看这篇文章的你是不是其中一员？如果是的话，相信通过本文的学习，你对CSS编码顺序会有一个新的认识。
