您的位置: 首页 > 技术文档 > 网页制作 > 整理及优化CSS代码的七个原则
javascript修正12个浏览器兼容问题 回到列表 firefox3.5将带来的新特性
 整理及优化CSS代码的七个原则

作者:暴风彬彬 时间: 2009-04-21 文档类型:翻译 来自:彬Go

第 1 页 整理及优化CSS代码的七个原则 [1]
第 2 页 整理及优化CSS代码的七个原则 [2]
第 3 页 整理及优化CSS代码的七个原则 [3]
第 4 页 整理及优化CSS代码的七个原则 [4]

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文件不只是为了呈现给你网站的最终用户。上面的原理可以帮助用户体验以及开发者经验。运用这些原则到你未来的项目中,一定能够获得重大的成效。

本文链接:http://www.blueidea.com/tech/web/2009/6642.asp 

出处:彬Go
责任编辑:bluehearts

上一页 整理及优化CSS代码的七个原则 [3] 下一页

◎进入论坛网页制作WEB标准化版块参加讨论,我还想发表评论

相关文章 更多相关链接
影响reflow的因素及其优化
CSS文档流与块级元素和内联元素
15个网站用户体验优化禁忌
无缝的缓存读取:双存储缓存策略
再谈CSS样式表书写风格
热门搜索:CSS Fireworks 设计比赛 网页制作 web标准 用户体验 UE photoshop Dreamweaver Studio8 Flash 手绘 CG
站点最新 站点最新列表
100个黑色名片设计欣赏
MSDN技术资源库改进预览
图标设计欣赏——icondoctor
Web Storage全解析
Photoshop制作音乐网站播放器
解读iPhone平台的设计思路
Web Design广告字体设计技巧
Visual Studio DSL 入门(四)
HTML 5 Video概述
Visual Studio DSL 入门(三)
栏目最新 栏目最新列表
Firefox的Jetpack扩展案例分析
阿里妈妈UED谈CSS Sprites技术
Photoshop中设计绿色时尚Web网站
操作Dom节点实现间歇滚动新闻
浏览器15年历史回顾
如何创建Firefox的Jetpack扩展
全透视:CSS Z-index 属性
用PS 3D工具绘制甜麦圈包装袋
悟道Web标准:让W3C标准兼容终端
悟道WEB标准:统一思想,遵循标准
>> 分页 首页 前页 后页 尾页 页次:4/41个记录/页 转到 页 共4个记录

蓝色理想版权申明:除部分特别声明不要转载,或者授权我站独家播发的文章外,大家可以自由转载我站点的原创文章,但原作者和来自我站的链接必须保留(非我站原创的,按照原来自一节,自行链接)。文章版权归我站和作者共有。

转载要求:转载之图片、文件,链接请不要盗链到本站,且不准打上各自站点的水印,亦不能抹去我站点水印。

特别注意:本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有,文章若有侵犯作者版权,请与我们联系,我们将立即删除修改。

本文现有 5 条评论 评分:- llllllllllllllllllll + 评分人数: 1 ,平均分: 5.00


hzhjun Publish at 2009-4-30 15:39:30
个人认为,css样式如果按照结构不断缩进,内容很多的话,会是页面更乱;已经写好了结构,只要找到外层,那整个样式也很好找到。
hzhjun Publish at 2009-4-30 15:36:13
定义字体只有那三种形式吗?经常用到的:font-weight,font-size,line-height,font-family,如果缩写:font:bold 12px/20px "宋体";好像不生效~
barrycheung Publish at 2009-4-30 15:23:26 评分5
学习学习,不论是否有争议 自己多琢磨琢磨,自己取舍吧
yoom Publish at 2009-4-24 11:50:38
我喜欢使用留白中的,第二种。

写在一行,不过我会缩进。
#aa ul li{}
#aa ul li a{}

类似这样的缩进。
sasumi Publish at 2009-4-21 20:43:19
“使用留白 ”这个例子说的比较牵强。
例子里面留白的那段程序只表述了两行css, 而下面的那些也太混乱了吧。 不同元素隔行写都不会?

还有,例子里面 #ft #footernavigation ul {} 有没有必要声明两个 ID 去表明一个元素的样式啊? SBB的。 ID唯一的,你标多少个都没有用,除非程序后期需要做样式叠加才需要这样弄的。

一般我只声明一个 ul#id {} 就足够了。
您的评论
用户名:  口令:
说明:输入正确的用户名和密码才能参与评论。如果您不是本站会员,你可以注册 为本站会员。
注意:文章中的链接、内容等需要修改的错误,请用报告错误,以利文档及时修改。
不评分 1 2 3 4 5
注意:请不要在评论中含与内容无关的广告链接,违者封ID
请您注意:
·不良评论请用报告管理员,以利管理员及时删除。
·尊重网上道德,遵守中华人民共和国的各项有关法律法规
·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
·本站评论管理人员有权保留或删除其管辖评论中的任意内容
·您在本站发表的作品,本站有权在网站内转载或引用
·参与本评论即表明您已经阅读并接受上述条款
推荐文档 | 打印文档 | 评论文档 | 报告错误  
专业书推荐 更多内容
《Web标准设计》
闪魂-FlashCS4完美入门与案例精粹
Waver_h's华丽世界
Illustrator CS3质感绘画表现技法
《Flash短片轻松学》
《用户体验要素》
《JavaScript语言精粹》
作品集 更多内容

练习练习练习 某项目飞机稿 2797食品商城页面设计 游戏LOGO设计稿 产品包装 家校通站首页 最近做的几个页面 练习练习练习