整理优化网站的CSS代码[网站美工]

当我们面对网站项目里日益宏大的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缩进,全部属性独立一行.

比较上下的图片,是哪一种格局能让你越发节俭改正的时间呢?留白会让你越发简单管理代码.

　　以上是“整理优化网站的CSS代码[网站美工]”的内容，如果你对以上该文章内容感兴趣，你可以看看七道奇为您推荐以下文章：