整理优化你的CSS代码
当我们面对网站项目里日益庞大的css,javascript文件,无论是为了二次开发还是浏览器解析,都应该优化他们的代码,但是优化并不意味着是简单的压缩或减小文件体积。条理清晰,运行效率高才是我们要的结果。那么有哪些手段能够我们的css代码呢?一起来看看下面的一些建议吧。 缩写能够缩短你的工作时间,减小你的文件体积,何乐而不为? 针对相近的不同设置不同的值: p { 使用缩写: p { margin: 10px 20px 30px 40px; }
再来看看常用的font的缩写
2.避免使用Hack
Hack是一个糟糕的东西,它会为不同浏览器定义一样的代码,使得CSS繁冗。现在我们知道使用条件性注释来代替hack,他们在IE6和IE7中是被认可的,甚至IE团队也推荐这样使用。使用条件性注释服务于符合浏览器特性专用的CSS代码,因此,更小的、核心的CSS代码用来服务于遵从标准的浏览器,只有需求条件出现的时候(比如IE),才会去下载额外的CSS文件! 下面来看看IE6使用条件性注释的代码范例: <!--[if IE 6]> 这段代码使得IE6去下载额外的ie6.css解析它专用的css代码。同样的,如果针对IE7只用把上面的6与7替换就行了。 3.使用留白 无论是为了自己阅读还是二次开发,都要让CSS保持良好的可读性,留白就充当了关键的角色。
对比上下的图片,是哪一种格式能让你更加节约修改的时间呢?留白会让你更加容易管理代码。 4.移除多余的frameworks和resets
如果你选择使用CSS framework,包括你自己写的,如果你去检查代码一定会发现该framework包含的一些规则并不适用于你当前的文件,它们是可以被删除的。 5.扩展的CSS
另一种优化你的代码的方法就是分别为层进行具体的属性声明。 6.记录你的工作
在团队协作中,沟通书写标准,编码规范,注释方法,风格极为重要。规则是建立在一个一致的方法的标准。这样能够防止别人重复你已经做过的工作,防止代码的膨胀。 7.压缩使用 为了使得浏览器节省更多下载个载入时间,压缩是一个不错的解决方案,但是仅限于发布的时候。YUI Compressor 和 CSSTidy 就是这样方面的专家,他们能够去除多余的代码,校验属性互相覆盖的错误。 有一点,这些程序尽可能会降低错误的发生,但并不是完美的。同样,最好不要用他们去处理包含CSS hack的文件。这也是另一个让那些hack储存在另外的文件里的原因。 结束 -------------------------------------------------------------------------------- 整洁和优化的代码不只是你的文件大小,还包括了维护性和可读性。以上的原理并不只是针对CSS,它们还能应用到HTML,Javascript以及其他编程语言。CSS文件不只是为了呈现给你网站的最终用户。上面的原理可以帮助用户体验以及开发者经验。运用这些原则到你未来的项目中,一定能够获得重大的成效。 |
凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢! |