CSS编码顺序研究

       我们在书写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编码顺序会有一个新的认识。