书写整洁优雅的CSS3代码

标签： clean-css3 (X)HTML/CSS/XML/XSL css3-order css3 | 发表时间：2011-02-20 17:29 | 作者：Leeiio Han

出处：http://leeiio.me

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多行…

本文地址:http://leeiio.me/writing-clean-css3-code/

截至您的阅读器抓取时已有评论 38 条,大家讨论的如此激烈,你为什么不过去瞧瞧?!

声明: 本站遵循署名-非商业性使用-相同方式共享 3.0 共享协议. 转载请注明转自 Leeiio.me

书写整洁优雅的CSS3代码

相关 [书写 css3 代码] 推荐：

书写整洁优雅的CSS3代码

CSS3 代码生成工具：Create CSS3

代码检测HTML5/CSS3新特性的浏览器支持情况

【前端集锦】推荐十款精心挑选的在线 CSS3 代码生成工具

css3 变形

CSS3 文字渐变

用css3写个logo

CSS3 pointer-events介绍

HTML5 & CSS3 研究文档

纯CSS3透明水晶盒

相关文章

订阅