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多行…
坑爹了！
为什么不选择对css源文件进行压缩再发布呢？
可以关注下 yui compressor
@chone …明显你会错意思了，发布是发布，这个是开发时候写的代码
@Leeiio
源代码我使用每个属性一行
我的习惯是一行一个属性，css2 和 css3一视同仁
ps. 似有 -》 私有
@任平生 感谢指正错别字哈
@任平生 我喜欢把私有属性写在 JS 里输出，你懂的
@万戈 万一用户禁了js呢…
@MOPVHS 禁用JS，那多无趣呀，我无视这样的访客，哈哈
好文，我现在是CSS3的另起一行，内容合并，没额外缩进。CSS3属性多了的话依旧挺乱的。
我接受不了把全部写在一行，一定要分行写，不然我会吐血的。。：（
@Sam 每个样式分一行我也尝试过，现在放弃了
@Sam sam啊，我觉得分行写看起来更让我吐血，特别是样式多起来的时候，查找一个属性都要翻几行。
~_~都是看着手册复制的~~
Pingback: Tweets that mention 书写整洁优雅的CSS3代码 - Leeiio Chaos Made. -- Topsy.com
我一般是这样排的，高宽相关在同一行，边框相关在同一行，内容相关在同一行，定位相关在同一行，css3里的同一功能不同浏览器的在同一行，我觉得这样比较便于查找
=.= 每个属性一行，懒得区分 是不是 CSS3 了、、
我会这样：
.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);
}
属性之间空格隔开。
一行太长的话，进行分组分行
相近的只要不是太长就写在一行
我习惯一行一行来，看起来比较清晰，好维护。
我也来找个错别字“于是这样同样…” ➡ “这位同样”
我现在基本就按照推荐的方法写
学习了！很好的方法！
一条属性一行。
这样我感觉我在找属性时比较方便。
滚动条用得少，直接用firebug看line num，然后VIM直接 ：line num
#el {
border: 1px solid red;
}
我要严格按照这种风格写，不然看着很不清爽。
至于滚动条，我想可以分为好几个文件写，
打包的时候合并文件就好了。
border属性前有个tab缩进的。
我是每个属性一行来写，因为我使用的DW，所以写得差不多的时候使用DW的“命令 – 应用源格式”，就能把代码都自动调整为一行的。之后再要修改，靠Firebug读行号，也不麻烦。
🙂 这样的书写方式确实很棒!
每个属性一行
并且依照 Alphabetical 做排序（好处是不会重复、团队开发容易遵循）
滚动条的问题…
一个 CSS 文档是一个 DIV 模块，所以通常不会超过 100 行、还可以接受
另外就算不是一个 CSS 一个文档，编辑器也可以设定适当的收摺。
@josephj 模块化来分割css文件确实是有必要的，但是对于css的属性顺序采用 Alphabetical 其实我觉得不太好，这个只是解决了查看的问题，Mozilla不是有个书写顺序么，我觉得按那个来不错，形象符合浏览器的渲染过程
我是把css3这些私有的扔到一起……
主题也太牛了吧，边栏也能关闭，^_^
@异度空间 一般一般
我一直觉得应该把私有属性放最后的
.main{width:960px;margin:0 auto;}
像这样多些几个属性就会看得眼花…
.main
{
width:960px;
margin:0 auto;
}
习惯这样了…然后用搜索找~~
我一直觉得这些法不错，但是还是有点复杂，看老外写的都挺简单。
我也一直尝试着使用老外的这种写法，比较规范。
你是一边看我的代码一边写的文章吧？
我觉得不管怎么写，第一点要保证便于日后维护
@chatry 博主这个获取用户浏览器和操作系统的功能貌似有问题。。我是chrome11，WIN7系统