分享
 
 
 

整理优化你的CSS代码

王朝html/css/js·作者佚名  2008-11-25
窄屏简体版  字體: |||超大  

当我们面对网站项目里日益庞大的css,javascript文件,无论是为了二次开发还是浏览器解析,都应该优化他们的代码,但是优化并不意味着是简单的压缩或减小文件体积。条理清晰,运行效率高才是我们要的结果。那么有哪些手段能够我们的css代码呢?一起来看看下面的一些建议吧。

1.使用缩写

缩写能够缩短你的工作时间,减小你的文件体积,何乐而不为?

针对相近的不同设置不同的值:

view plaincopy to clipboardprint?

p {

margin-top: 10px;

margin-right: 20px;

margin-bottom: 30px;

margin-left: 40px;

}

p {

margin-top: 10px;

margin-right: 20px;

margin-bottom: 30px;

margin-left: 40px;

}

使用缩写:

view plaincopy to clipboardprint?

p { margin: 10px 20px 30px 40px; }

p { margin: 10px 20px 30px 40px; }

再来看看常用的font的缩写

查看 CSS Shorthand Guide (英) 和 Efficient CSS with shorthand properties (英) 了解更多关于缩写的属性。

2.避免使用Hack

Jon Hick的 blog hicksdesign.co.uk/journal 利用浏览器条件性注释

Hack是一个糟糕的东西,它会为不同浏览器定义一样的代码,使得CSS繁冗。现在我们知道使用条件性注释来代替hack,他们在IE6和IE7中是被认可的,甚至IE团队也推荐这样使用。使用条件性注释服务于符合浏览器特性专用的CSS代码,因此,更小的、核心的CSS代码用来服务于遵从标准的浏览器,只有需求条件出现的时候(比如IE),才会去下载额外的CSS文件!

下面来看看IE6使用条件性注释的代码范例:

view plaincopy to clipboardprint?

<!--[if IE 6]>

<link rel="stylesheet" type="text/css" href="ie6.css">

<![endif]-->

<!--[if IE 6]>

<link rel="stylesheet" type="text/css" href="ie6.css">

<![endif]-->

这段代码使得IE6去下载额外的ie6.css解析它专用的css代码。同样的,如果针对IE7只用把上面的6与7替换就行了。

3.使用留白

无论是为了自己阅读还是二次开发,都要让CSS保持良好的可读性,留白就充当了关键的角色。

我们不鼓励你为了得到一个更小的CSS文件,就去掉所有的空白格式,如tab,换行,空格等。这里推荐嵌套的代码使用一个tab缩进,所有属性独立一行。

对比上下的图片,是哪一种格式能让你更加节约修改的时间呢?留白会让你更加容易管理代码。

4.移除多余的frameworks和resets

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

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

由此可以想到的还有reset,YUI Grid CSS使用的reset和Eric Meyer's Reset 目前都很流行, Resets能够移除不同浏览器的默认样式,使得页面在各个浏览器之间的表现一致。但是它们通常包含了一个大的网站需要的所有属性,一些例如pre,code,sub,dfn,var等等属性对于普通网站来说根本不会用上,删掉那些你用不上的。Eric Meyer也会鼓励你这样做!

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

5.扩展的CSS

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

另一种优化你的代码的方法就是分别为层进行具体的属性声明。

6.记录你的工作

在团队协作中,沟通书写标准,编码规范,注释方法,风格极为重要。规则是建立在一个一致的方法的标准。这样能够防止别人重复你已经做过的工作,防止代码的膨胀。

7.压缩使用

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

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

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

结束

--------------------------------------------------------------------------------

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

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有