5步让你的CSS样式表成功减肥

css-压缩-减肥

你有没有觉得你的CSS样式表文件过于臃肿?其实如果你注意并培养一些比较好的CSS书写习惯,我想你的CSS样式表过于”肥胖”的问题会得到很好的改善的。来看看下面的简单5步吧,掌握之后你便能立即为你的CSS样式表修身了。

第一步:学会如何组合选择器

什么是选择器?
如果你还不知道什么叫做”选择器”,你可以先参考一下w3schools.com的CSS语法概述

未优化的CSS代码
在下面的图例中,你会看到来自三个不同选择器的同样的CSS属性声明。

css-压缩-教程
点击小图浏览清晰大图

优化的CSS代码
你可以将上面的css代码优化组合,让所有CSS选择器使用同一组属性。每个选择器之间用逗号分割开,像下面这样。

h2, p, .block {
    font-size: 1.5em;
    padding: 10px 10px 10px 25px;
    margin: 10px 0;
    border: 1px solid #ddd;
    background: #f0f0f0 url(crown.gif) no-repeat 5px 10px;
}

查看Demo实例

第二步:了解CSS选择器优先级

什么是CSS优先级?
选择器优先级是用于在CSS代码中同一个选择器使用不同属性时CSS优选处理哪些属性的规则。对选择器优先级不了解的话可以参考:Juicy Studio –选择器优先级

未优化的CSS代码
理解优先级规则中不同等级重要性是很必要的,如果写了同样优先级的CSS声明将有可能导致代码冲突和代码臃肿。

css-优先级
点击小图浏览清晰大图

查看Demo实例

优化的CSS代码
当你完全掌握CSS选择器优先级之后,你便能通过合并统一的属性声明来所见代码量,然后再单独声明元素的独有属性。你会很快找到优化CSS代码的技巧,对完成合并和匹配代码。下面是关于优化上图代码的实例:

h2 {
    font-size: 1.5em;
    padding: 10px 10px 10px 25px;
    margin: 10px 0;
    border: 1px solid #ddd;
    background: #f0f0f0 no-repeat 5px 10px;
}

h2.best {background-image: url(crown.gif);}
h2.fav {background-image: url(heart.gif);}
h2.comments {background-image: url(balloon.gif);}
h2.twitter {background-image: url(balloon_twitter.gif);}

#featured h2.twitter {
    background-color: #fffdd7;
    border: 1px solid #ddd991;
}

你还可以参考以下相关文章:

第三步:学会如何合并类和ID

和之前类似,你也可以通过匹配合并class名和id值来优化你的CSS代码。请记住,为同一个元素添加不同的多个class,你就可以通过组合不同的属性声明在实现你希望的效果。在适当的位置添加id属性也是可以让你对样式有更多的控制权。

HTML

<div id="featured">
    <h2 class="best double">Best of</h2>
    <h2 class="fav double">Popular Posts</h2>
</div>
<div id="disable">
    <h2 class="comments double">Comments</h2>
    <h2 class="twitter double">Twitter</h2>
</div>

CSS

...

h2.best {background-image: url(crown.gif);}
h2.fav {background-image: url(heart.gif);}
h2.comments {background-image: url(balloon.gif);}
h2.twitter {background-image: url(balloon_twitter.gif);}
h2.tools {background-image: url(wrench_screwdriver.gif);}

h2.double {
    width: 263px;
    float: left;
    margin: 0;
}
#featured h2.double {
    background-color: #ffe2e2;
}
#disable h2 {
    filter:alpha(opacity=40);
    opacity:.40;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
    background-color: #d5d5d5;
}

第四步:学会CSS简写

CSS简写可以让你将多行的CSS属性声明缩写成简单的一行代码。现在你在很多地方都可以找到CSS缩写的相关教程,你也可以浏览以下CSS缩写教程:

第五步:将你的样式表分成几部分–@import

在你完成一个比较大的网站项目时,你的样式表中的代码量是相当庞大的,也许会有很多不同模块的CSS声明及注释。这种情况下,你可以考虑使用将一个庞大的样式表切割成几个不同模块的小样式表,然后再用@import将他们组合起来。

HTML
你可以像平常一样调用一个样式表

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

CSS – styles.css
这时styles.css作为你的主样式表,它将负责调用其它子样式表。(我会把子样式表放在’styles’ 目录下以便于组织管理,纯属个人习惯,你也可以有自己的习惯)

@import "styles/main.css";
@import "styles/checkout.css";
@import "styles/shoppingcart.css";

译者注:@import虽然能够为某个大的CSS文件减肥,但是它在页面读取方面(尤其IE)还是有弊端的。感兴趣的读者可以看看这篇文章:
《Don’t Use @import》

你还可以参考以下相关文章:

留意更新

订阅彬Go以查看CSS最新教程及资源。

英文原文:5 Step Style Sheet Weight Loss Program
翻译原文:5步让你的CSS样式表成功减肥(彬Go)

转载声明:
原载:彬Go——集前端开发/网页设计/网站可用性/用户体验于一体的趣味互联网生活
本文链接:http://blog.bingo929.com/optimizing-css-tutorial-div-css.html
如需转载必须以链接形式注明原载或原文地址,谢谢合作

15 Comments

发表评论

  • 麦芽糖和鱼
    2012-06-28

    好东东学习了……

  • 12580
    2011-12-13

    学习了,挺不错的!

  • cz
    2009-10-04

    顶啊,很多好资源啊!

  • 暴风彬彬
    2009-08-20

    @Elementstorm:
    前些阵子博客大搬家,从原先的windows主机搬到新的Linux主机,中间有一段时间瘫痪了,呵呵,不过现在应该没问题了,感谢支持,嘿嘿~~

  • 暴风彬彬
    2009-08-20

    @SamGui:
    嘿嘿,感谢捧场!以后我会尽量多分享些好的前端知识的…

  • 匿名
    2009-08-16

    还是插图的字体好看,博主的字体不好看

  • Elementstorm
    2009-08-05

    呵呵,你的BLOG终于又开了,前阵子以为出啥事了,期待你更多更好的文章啊!

  • SamGui
    2009-08-04

    很喜欢你的Blog,也从这里学了不少东西,支持一个~~以后多发点好文章啦,呵呵

  • lin516
    2009-08-02

    好文章,辛苦了