最前端

我的工作,我的生活,点点滴滴...

关于css的书写顺序

很喜欢说“人不能太懒了”,工作更是如此,一开始懒了,乱了,后面麻烦自然而然就来了,一步慢,步步慢。写css时,对此深有体会,尤其在需求和设计不断变化的情况下,更是痛苦不堪。在项目开始的前期,团队认真沟通,仔细考虑好css的书写格式等规范,或许能减少项目后期维护的很多烦恼。这里就简单地总结一下自己css书写的顺序。

css order

一个css文件内容的书写顺序,包括三方面:

  1. 各组选择器的顺序,如:

    /*布局或模块化时的顺序*/
    .header{...}/*1*/
    .main{...}/*2*/
    .side{...}/*3*/
    .footer{...}/*4*/
     
    /*伪类的顺序*/
    a:link{...}/*1*/
    a:visited{...}/*2*/
    a:hover{...}/*3*/
    a:active{...}/*4*/
  2. 每个选择器里,各属性的顺序,如:

    .header{
    	color:#333;/*1*/
     
    	width:960px;/*2*/
    	height:250px;
     
    	background-color:#fff;/*3*/
    }
  3. 每个属性的子属性顺序,如:

    .header{
    	/*顺序为:background-color || background-image || background-repeat || background-position || */
    	background:#fff url(images/header.jpg) repeat-x center top;
    }

这里着重讨论一下第二个方面,即每个选择器里,各属性的顺序。每个人在写css的时候,这个顺序都不同,也没有官方的说法,Mozilla Firefox方面貌似推荐过一个简单的顺序Mozilla suggested css order,不太官方,但值得参考。我推荐的是如下 顺序:

/*一般HTML标签的选择器*/
.normal{
    /*定位*/
    position:relative;
    left:10px;
    top:10px;
    z-index: 1;
 
    /*布局*/
    display:block;
    float: left;
        /*其它
        clear:left;
        overflow:scroll;
        visibility:visible;*/
 
    /*尺寸大小,由内而外*/
    width:100px;
    height:100px;
    padding:10px;
    border:1px;
    margin:10px;
        /*其它
        min-width:100px;
        min-height:100px;
        max-width:200px;
        max-height: 200px;*/
 
    /*背景*/
    background:#fff url(../images/body.jpg;) left top repeat-x;
    opacity:0.5;
 
    /*文本*/
    text-align:left;
    vertical-align:middle;
    text-indent:-9999px;
    text-overflow:ellipsis;
    word-break:break-all;
 
    /*字体*/
    font:12px Tahoma,Helvetica,Arial,sans-serif;
    line-height:1.5em;
    text-decoration:underline;
        /*其它
        caption:first-letter;
        letter-spacing:1px;
        text-shadow:1px 1px 1px #ccc;
        word-spacing:5px;*/
/*列表表格等特有属性统一放在后面*/
.list{
	list-style:disc outside;
}
.table{
	border-collapse:collapse;
	table-layout: fixed;
}

这里的属性的顺序是由外到内的,定位->布局->尺寸->背景->文本->字休,也可以简单地说顺序是布局->盒子->内容,也就是先渲染全局,再渲染自身。我不知道各大浏览器是不是按这样顺序渲染的,但至少这样分组管理和维护起来更方便和不容易出错。肯定还有很多不合理的地方,发现问题的朋友多多指教哈,比如说css3的新属性如何分块,它们的书写顺序是怎么样的。

  1. 受益匪浅,谢谢

    • 初夏微醺
    • 2011/07/25 5:50下午

    有的人建议按照字母排序来写,私以为不是很好,还是比较喜欢楼主这种

  2. 能给出这么做的原因就更好啦。。

    • 目的是为了更好的开发和维护,原因就是为了达到这个目的。哈哈。

  1. 暂无 Trackback

您必须 登录 后才能发表评论