CSS的书写顺序规范

一个站点成功与否，不是在于所用的程序语言是PHP还是ASP，也不在于用BLOG建站或是CMS建站，内容和专业很重要。博客很好起步，CMS体系很完整。但最终还是要看用户的需要了，是否能在最短的时间找到他们最需要的东西。

“苦力王的蓝球视频”就是一个例子，原来是用z-blog建的，自从CEO换人之后，页面改成了CMS，增加一些资讯，用户就反映不能快速找到，他们最需要的NBA视频了，从而把优势变为劣势。这是盲目追求“大而全”的一个失败教训，期望新站长能够及早发现。

个人还比较欣赏“站酷”这个设计素材站点，主站和论坛发展都很好，大有超越“经典论坛”之势。一开始只是网上素材收集，现在原创内容也搞得非常火热。页面简洁大气，内容丰富。这是网站专业定向精准、内容和形式结合非常好，网站分阶段发展，一个非常成功的例子。

Visc在聊天时说过，分阶段性的实施计划，这点非常重要，一开始就想做全，非常难而且耗时耗精力，如果先走一步看看发展方向，然后再继续，还是比较可行。说真的，在我们博客话题群，虽是一些小站长，但里面人才济济，看他们聊天，能学到不少东西。

以上是一些题外话，算是总结吧，下面开始转载。

我们运用xhtml+css网页布局，实现表现与结构的分离，表现部分的css文件非常重要，也比较繁杂，我们在书写CSS文件时有很多属性和值，我们就考虑到了书写顺序的问题。

有时候是先写了margin或color，然后再写width和height等等。我们有没有必要让我们的编码更加的工整，更加的科学呢？实践证明，书写工整、按一定的规则进行书写是很有好处的。

下面是Mozilla Firefox所建议的CSS书写顺序，对我们的代码书写很有参考价值：

mozilla.org Base Styles
* maintained by fantasai
* (classes defined in the Markup Guide -http://mozilla.org/contribute/writing/markup)
*/
/* Suggested order:
//显示属性
* display
* list-style
* position
* float
* clear

//自身属性
* width
* height
* margin
* padding
* border
* background

//文本属性
* color
* font
* text-decoration
* text-align
* vertical-align
* white-space
* other text
* content
*
*/<--文章内容结束标识，勿删！！--> <--page--> 

下面这段是52CSS自己总结的，对上面的书写顺序规则作出自己的理解，而且里面有一些例程进行对比，两厢比较，就可以看出CSS书写顺序重要性了。

想要编写出专业、易懂具有很好的编码思维的CSS样式文件，是需要花一定的精力来学习的。

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

代码A：

#main {
    font-size:13px;
    width:500px;
    background:url(http://www.zfnn.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.zfnn.com/logo.jpg) no-repeat 20px 200px;
    color:#c00;
    font-size:13px;
    line-height:22px;
}

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

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

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

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

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

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