原文地址：The problem with using multiple CSS files for layout
翻译整理：西米CC
在A List Apart读到一篇文章Progressive Enhancements with CSS，主要讲述把一个网站的样式表分成若干文件的好处，比如把布局和定位的样式定义放在layout.CSS里，把图像和颜色相关的样式放在colors.CSS里等等。乍看起来似乎很有道理，因为这种做法可以让我们的样式表更加整洁和有序，但在实际应用中却可能存在一些问题。
我提出这个说法主要基于三大理由。
首先，当我们把样式表分成多个文件的时候，将会增加代码重复的几率。比如我在样式表中定义一个容器的字体、背景和颜色等属性，倘若只把它们放在一个单独的样式表main.css中，代码如下:
- #element {
- position: relative;
- float: left;
- width: 20em;
- color: #f0f;
- background: url(/images/background.gif) repeat-x 0 0;
- font: 120% Arial, Helvetica, Verdana, Sans-serif;
- }
但是若把这些样式定义分别放到不同的样式表中：
- /* typography.css */
- #element {
- font: 120% Arial, Helvetica, Verdana, Sans-serif;
- }
- /* layout.css */
- #element {
- position: relative;
- float: left;
- width: 20em;
- }
- /* color.css */
- #element {
- color: #f0f;
- background: url(/images/background.gif) repeat-x 0 0;
- }
很容易就可以看出在代码简洁性上的优劣。现在来看一下我的第二个理由。
单独的CSS样式表文件最容易导致的问题就是体积的增大，通常我编写的样式表大概有1200到2000行代码。这当中所存在的区别其实很小，但有些人却总习惯在讨论这个问题的时候夸大其辞。样式表文件大了并不一定就代表它会臃肿，只要我们合理的利用好注释、CSS缩写，以及在编写CSS的时候有目的的进行一些组织，它就不会影响到样式表的管理和执行效率。
最后，像Digg之类的大型网站，只用一个2500行的单独样式表总有个理由吧？答案就是更少的页面请求。这点对于流量巨大的网站是很有好处的，使用多个样式表文件可能会降低网站在这方面的效能。大家还可以看看simplebits.com、veerle.duoh.com、zeldman.com等网站，也没有在分割样式表上大行其道，是它们没有考虑到A List Apart上的建议吗？
当然本文并不是为了否决分割样式表的观点，每个网站都有各自的特点，像MTV.com经常要变换网站的色彩搭配，那么把与颜色相关的样式独立出来就显得很明智了，还有微软的网站，不同的子站在布局上存在很大的差异，也就很有必要把布局样式单独定义成一个文件了。
