注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

艾艾贴微商代理,微信:zeji110

艾艾贴,是30:1的五年黄金艾绒,效果是传统艾灸3~5倍!

 
 
 

日志

 
 
关于我

没基础?没资金?没关系!手把手教你低成本创业。加入我们,让你月薪过万,时间、金钱双自由。

网易考拉推荐

CSS代码优化(下)  

2012-09-19 16:54:10|  分类: 【网站设计】 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

  4.移除多余的结构(frameworks)和重设(resets)

CSS代码优化(详七条)_新客网

  Nathan Smith的 960 Grid System CSS framework使用的重置规则

  如果你选择使用CSS framework,包括你自己写的,如果你去检查代码一定会发现该framework包含的一些规则并不适用于你当前的文件,它们是可以被删除的。

  由此可以想到的还有reset,YUI Grid CSS使用的reset和Eric Meyer’s 重设(Reset) 目前都很流行, Resets能够移除不同浏览器的默认样式,使得页面在各个浏览器之间的表现一致。但是它们通常包含了一个大的网站需要的所有属性,一些例 如

  ,,,,等等属性对于普通网站来 说根本不会用上,删掉那些你用不上的。Eric Meyer也会鼓励你这样做!

  framework和reset会很好的帮助你的工作,但是如果不去掉那些你用不上的使用,反而会拖累你页面的效率和可读性。

  5.让CSS能保证日后的维护

CSS代码优化(详七条)_新客网

  Doug Bowman的 stopdesign.com CSS 为层使用特殊的选择器

  另一种优化CSS代码的方法是按照你的习惯将CSS生命分成清晰的结构块。将CSS文件的声明用注释分隔开并进行排版,可以更方便自己在很长时间以后重新审理这个CSS文件,到那时你的效率会高出许多。

  然而,暴风彬彬更崇尚那种拆分布局风格,也就是给每种布局一个单独的CSS文件。Andy Clarke的《超越CSS》(Transcending CSS)一书也是提倡这种方法。

  6.记录你的工作

CSS代码优化(详七条)_新客网

  David Shea在他的网站mezzoblue.com中详细讲解了标记指导(markup guide).

  如果你是一个设计团队中的一员,那么让你的代码保持规则的一致性并能与其他成语建立良好的沟通是相当重要的,而且还要建立一种网站的标准。例如,团 队中的某个成员想出了一个比较不错的网站标签切换界面,记录下来这些想法和注解会帮助团队的其他成员再次使用这种效果,这样能够避免HTML或CSS代码 的臃肿。

  记录工作主要包括标记向导(markup guides)和样式表向导(style sheet guides), 这种工作并不仅仅适用于团队,也同样适用于一个人的设计工作(一个人的”团队”)。毕竟,在完整一个设计项目之后,经过一年甚至更长的时间,当你再回来看 到这些曾经自己写的代码时,也一样会觉得很陌生。将来你会通过自己曾经的记录了解到在那些CSS结构是如何让网页表现的,或那个网页对表单按钮的起到副作 用。

  记住,一定要养成为CSS写注释的习惯。

  7.压缩使用

  为了使得浏览器节省更多下载个载入时间,压缩是一个不错的解决方案,但是仅限于发布的时候。YUI Compressor 和CSSTidy 就是这样方面的专家,他们能够去除多余的代码,校验属性互相覆盖的错误。

  许多流行的编辑器,比如BBEdit, TextMate, 和 TopStyle 都能够帮助你格式化你的CSS代码成你想要的样子。你还能通过服务器压缩技术使用PHP处理你的CSS。你可以找到更多的CSS优化和压缩的CSS工具。

  有一点,这些程序尽可能会降低错误的发生,但并不是完美的。同样,最好不要用他们去处理包含CSS hack的文件。这也是另一个让那些hack储存在另外的文件里的原因。

  总结

  整理和优化代码不仅是为了你的CSS文件大小,还包括了维护性和可读性。以上的原理并不只是针对CSS,它 们还能应用到HTML,Javascript以及其他编程语言。CSS文件不只是为了呈现给你网站的最终用户。上面的原理可以帮助用户体验以及开发者经 验。运用这些原则到你未来的项目中,一定能够获得重大的成效。

  评论这张
 
阅读(167)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017