书写整洁优雅的CSS3代码

CSS3已经开始被大家广泛的运用到产品中的页面代码中去,CSS3带来的革新式的变化我在这里就不一一细说了。不过因为目前的CSS3还处在草案阶段,所以绝大部分的浏览器(除了opera应该是)都是使用的私有属性的方式来实现对CSS3的支持。比如firefox的-moz-前缀和webkit核心浏览器的-webkit-前缀等。

整洁优雅的代码能提高生产效率,特别是在团队合作中。我想很多人都习惯把css代码写成一行的形式,诸如这样:

.main{width:960px;margin:0 auto;}
.sidebar{width:233px;float:left;}
.sidebar ul li{float:left}

采用这样的一行形式,能让你们整齐的排列相似父辈继承的样式,让他们很简单的能被查找到。当然为了更好的查找到代码,你们可能还需要一个注释。

/*
something u want to say --------------------------------------------------*/
.main{width:960px;margin:0 auto;}
.sidebar{width:233px;float:left;}
.sidebar ul li{float:left}


然后这时候我们想给sidebar加一个5像素的圆角,于是

/*
sidebar border-radius {3px} --------------------------------------------------*/
.main{width:960px;margin:0 auto;}
.sidebar{width:233px;float:left;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;}
.sidebar ul li{float:left}

这样你可能还不会觉得有什么,因为只是加了border-radius,如果我们继续加个box-shadow呢?

/*
sidebar border-radius {3px} --------------------------------------------------*/
.main{width:960px;margin:0 auto;}
.sidebar{width:233px;float:left;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;box-shadow:1px 1px 5px #rgba(0,0,0,0.1);-moz-box-shadow:1px 1px 5px #rgba(0,0,0,0.1);-webkit-box-shadow:1px 1px 5px #rgba(0,0,0,0.1);}
.sidebar ul li{float:left}

是不是看起来挺崩溃的,这不是坑爹么…sidebar的样式看起来糊成一团了,这些css3代码和普通的css代码混在一起十分难受…

于是这样同样有代码洁癖的老外童鞋给出了一种他的解决方案,请看

/*
sidebar border-radius {3px} --------------------------------------------------*/
.main{width:960px;margin:0 auto;}
.sidebar{width:233px;float:left;
	border-radius:3px;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	box-shadow:1px 1px 5px #rgba(0,0,0,0.1);
	-moz-box-shadow:1px 1px 5px #rgba(0,0,0,0.1);
	-webkit-box-shadow:1px 1px 5px #rgba(0,0,0,0.1);
}
.sidebar ul li{float:left}

这样来区分开css3代码是不是整洁多了!

引申话题,该同学blog底部还就css3的样式顺序发表了观点,到底是私有属性-moz-border-radius放前面还是标准的border-radius放前面,这里有一篇来自CSS3-TRICKS的《Ordering CSS3 Properties》阐述了为什么私有属性要放在标准的前面,把标准的放在最底下。

那么最终的代码就是这个样子的

/*
sidebar border-radius {3px} --------------------------------------------------*/
.main{width:960px;margin:0 auto;}
.sidebar{width:233px;float:left;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
	-moz-box-shadow:1px 1px 5px #rgba(0,0,0,0.1);
	-webkit-box-shadow:1px 1px 5px #rgba(0,0,0,0.1);
	box-shadow:1px 1px 5px #rgba(0,0,0,0.1);
}
.sidebar ul li{float:left}

不知道大家有没有什么不同的代码书写风格,希望能在评论中得到不同的见地。

PS:为什么我不喜欢把每个样式都单独分成一行?因为…我觉得这样的代码可读性真是太差了,试想,一个类样式占了10多行…

38 Responses to 书写整洁优雅的CSS3代码

  1. guanxin8977 says:

    坑爹了!

  2. chone says:

    为什么不选择对css源文件进行压缩再发布呢?
    可以关注下 yui compressor

  3. 任平生 says:

    我的习惯是一行一个属性,css2 和 css3一视同仁

    ps. 似有 -》 私有

  4. Sivan says:

    好文,我现在是CSS3的另起一行,内容合并,没额外缩进。CSS3属性多了的话依旧挺乱的。

  5. Sam says:

    我接受不了把全部写在一行,一定要分行写,不然我会吐血的。。:(

  6. 听临 says:

    ~_~都是看着手册复制的~~

  7. Pingback: Tweets that mention 书写整洁优雅的CSS3代码 - Leeiio Chaos Made. -- Topsy.com

  8. vehiclee says:

    我一般是这样排的,高宽相关在同一行,边框相关在同一行,内容相关在同一行,定位相关在同一行,css3里的同一功能不同浏览器的在同一行,我觉得这样比较便于查找

  9. Kars says:

    =.= 每个属性一行,懒得区分 是不是 CSS3 了、、

  10. Jenux says:

    我会这样:
    .sidebar{ width:233px; float:left;
    -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px;
    -moz-box-shadow:1px 1px 5px #rgba(0,0,0,0.1);
    -webkit-box-shadow:1px 1px 5px #rgba(0,0,0,0.1);
    box-shadow:1px 1px 5px #rgba(0,0,0,0.1);
    }
    属性之间空格隔开。
    一行太长的话,进行分组分行
    相近的只要不是太长就写在一行

  11. Alan says:

    我习惯一行一行来,看起来比较清晰,好维护。

  12. gsid says:

    我也来找个错别字“于是这样同样…” ➡ “这位同样” :mrgreen:
    我现在基本就按照推荐的方法写

  13. Way says:

    学习了!很好的方法!

  14. willerce says:

    一条属性一行。
    这样我感觉我在找属性时比较方便。

    滚动条用得少,直接用firebug看line num,然后VIM直接 :line num

  15. lingzuer says:

    #el {
    border: 1px solid red;
    }
    我要严格按照这种风格写,不然看着很不清爽。
    至于滚动条,我想可以分为好几个文件写,
    打包的时候合并文件就好了。

  16. lingzuer says:

    border属性前有个tab缩进的。

  17. ZH CEXO says:

    我是每个属性一行来写,因为我使用的DW,所以写得差不多的时候使用DW的“命令 – 应用源格式”,就能把代码都自动调整为一行的。之后再要修改,靠Firebug读行号,也不麻烦。

  18. 卜卜口の says:

    🙂 这样的书写方式确实很棒!

  19. josephj says:

    每个属性一行
    并且依照 Alphabetical 做排序(好处是不会重复、团队开发容易遵循)

    滚动条的问题…
    一个 CSS 文档是一个 DIV 模块,所以通常不会超过 100 行、还可以接受
    另外就算不是一个 CSS 一个文档,编辑器也可以设定适当的收摺。

    • Leeiio says:

      @josephj 模块化来分割css文件确实是有必要的,但是对于css的属性顺序采用 Alphabetical 其实我觉得不太好,这个只是解决了查看的问题,Mozilla不是有个书写顺序么,我觉得按那个来不错,形象符合浏览器的渲染过程

  20. zwwooooo says:

    我是把css3这些私有的扔到一起……

  21. 异度空间 says:

    主题也太牛了吧,边栏也能关闭,^_^

  22. 水水 says:

    我一直觉得应该把私有属性放最后的

  23. MOPVHS says:

    .main{width:960px;margin:0 auto;}

    像这样多些几个属性就会看得眼花…

    .main
    {
    width:960px;
    margin:0 auto;
    }

    习惯这样了…然后用搜索找~~

  24. Kimcool says:

    我一直觉得这些法不错,但是还是有点复杂,看老外写的都挺简单。

  25. 罗伊 says:

    我也一直尝试着使用老外的这种写法,比较规范。

  26. disinfeqt says:

    你是一边看我的代码一边写的文章吧?

  27. chatry says:

    我觉得不管怎么写,第一点要保证便于日后维护

  28. chatry says:

    @chatry 博主这个获取用户浏览器和操作系统的功能貌似有问题。。我是chrome11,WIN7系统

Leave a Reply

Your email address will not be published. Required fields are marked *