5种给CSS样式表瘦身减肥的方法

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

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

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

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

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

1
2
3
4
5
6
7

h2
   
   
   
   
}

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

h2
   
   
   
   

h2
h2
h2


   
}

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

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

HTML

1
2
3
4
5
6
7
8

>
    >Best of>Popular Posts>
>
    >Comments>Twitter>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

...

h2
h2
h2
h2
h2

h2.
   
   


   
}

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

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

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

1

>

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》

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