你有没有觉得你的CSS样式表文件过于臃肿？其实如果你注意并培养一些比较好的CSS书写习惯，我想你的CSS样式表过于”肥胖”的问题会得到很好的改善的。来看看下面的简单5步吧，掌握之后你便能立即为你的CSS样式表修身了。
什么是选择器?
如果你还不知道什么叫做”选择器”，你可以先参考一下w3schools.com的CSS语法概述。
未优化的CSS代码
在下面的图例中，你会看到来自三个不同选择器的同样的CSS属性声明。
点击小图浏览清晰大图
优化的CSS代码
你可以将上面的css代码优化组合，让所有CSS选择器使用同一组属性。每个选择器之间用逗号分割开，像下面这样。
|
1
2 3 4 5 6 7 |
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; } |
CSS简写可以让你将多行的CSS属性声明缩写成简单的一行代码。现在你在很多地方都可以找到CSS缩写的相关教程，你也可以浏览以下CSS缩写教程:
在你完成一个比较大的网站项目时，你的样式表中的代码量是相当庞大的，也许会有很多不同模块的CSS声明及注释。这种情况下，你可以考虑使用将一个庞大的样式表切割成几个不同模块的小样式表，然后再用@import将他们组合起来。
HTML
你可以像平常一样调用一个样式表
|
1
|
<link rel="stylesheet" type="text/css" href="styles.css" />
|
CSS – styles.css
这时styles.css作为你的主样式表，它将负责调用其它子样式表。(我会把子样式表放在’styles’ 目录下以便于组织管理，纯属个人习惯，你也可以有自己的习惯)
|
1
2 3 |
@import "styles/main.css";
@import "styles/checkout.css"; @import "styles/shoppingcart.css"; |
译者注:@import虽然能够为某个大的CSS文件减肥，但是它在页面读取方面(尤其IE)还是有弊端的。感兴趣的读者可以看看这篇文章:
《Don’t Use @import》
你还可以参考以下相关文章: