(2022年更新:我应该指出的是，许多专业开发人员现在使用SASS这样的系统来管理他们的CSS，或者与React兼容的框架，其中任何一种都可以在内部处理这些优化。)

我要唱反调了，因为我讨厌人们意见太一致。

1. 如果您需要一个依赖于另一个样式表的样式表，请使用@import。在单独的步骤中进行优化。

任何时候都有两个变量需要优化——代码的性能和开发人员的性能。在许多情况下，如果不是大多数情况下，更重要的是使开发人员更有效率，只有这样才能使代码更性能。

如果有一个样式表依赖于另一个样式表，最合乎逻辑的做法是将它们放在两个单独的文件中，并使用@import。这对于下一个查看代码的人来说是最有逻辑意义的。

(When would such a dependency happen? It's pretty rare, in my opinion usually one stylesheet is enough. However, there are some logical places to put things in different CSS files:) Theming: If you have different color schemes or themes for the same page, they may share some, but not all components. Subcomponents: A contrived example - say you have a restaurant page that includes a menu. If the menu is very different from the rest of the page, it'll be easier to maintain if it's in its own file.

样式表通常是独立的，所以使用<link href>来包含它们是合理的。但是，如果它们是一个依赖的层次结构，那么您应该做最合乎逻辑的事情。

Python使用import;C用法包括;JavaScript有require。CSS有import功能;当你需要它的时候，使用它!

2. 一旦你达到了站点需要扩展的程度，连接所有的CSS。

任何类型的多个CSS请求——无论是通过链接还是通过@imports——对于高性能网站来说都是糟糕的做法。一旦你到了优化很重要的时候，你所有的CSS都应该通过一个minifier来流动。Cssmin组合import语句;正如@Brandon指出的那样，grunt也有多种选择。(另见此问题)。

一旦到了简化阶段，<link>更快，正如人们指出的那样，所以最多链接到一些样式表，尽可能不要@import任何样式表。

然而，在网站达到生产规模之前，代码的组织性和逻辑性比稍微快一点更重要。

我使用@import的一个地方是当我处理一个页面的两个版本时，英语和法语。我将使用main.css用英文构建我的页面。在构建法语版本时，我将链接到一个法语样式表(main_fr.css)。在法语样式表的顶部，我将导入main.css，然后为法语版本中需要不同的部分重新定义特定的规则。

我认为这里的关键是你为什么要编写多个CSS样式表的两个原因。

You write multiple sheets because the different pages of your website require different CSS definitions. Or at least not all of them require all the CSS definitions one other pages require. So you split up the CSS files in order to optimize what sheets are load on the different pages and avoid loading too many CSS definitions. The second reason that comes to mind is that your CSS is getting that large that is becomes clumsy to handle and in order to make it easier to maintain the large CSS file you split them up into multiple CSS files.

第一个原因是附加的<link>标记将应用，因为这允许您为不同的页面加载不同的CSS文件集。

对于第二个原因，@import语句似乎是最方便的，因为您可以获得多个CSS文件，但加载的文件总是相同的。

从装载时间的角度来看并没有什么不同。浏览器必须检查和下载分离的CSS文件，无论它们是如何实现的。

引自http://webdesign.about.com/od/beginningcss/f/css_import_link.htm

The main purpose of @import method is to use multiple style sheets on a page, but only one link in your < head >. For example, a corporation might have a global style sheet for every page on the site, with sub-sections having additional styles that only apply to that sub-section. By linking to the sub-section style sheet and importing the global styles at the top of that style sheet, you don't have to maintain a gigantic style sheet with all the styles for the site and every sub-section. The only requirement is that any @import rules need to come before the rest of your style rules. And remember that inheritance can still be a problem.

出于速度考虑，最好不要使用@import在页面中包含CSS。看看这篇优秀的文章，了解为什么不去:http://www.stevesouders.com/blog/2009/04/09/dont-use-import/

此外，通过@import标记来缩小和合并css文件通常更困难，因为缩小脚本不能从其他css文件中“剥离”@import行。当你将它们包含为<link标签时，你可以使用现有的minify php/dotnet/java模块来进行缩小。

所以:使用<link />代替@import。

如果你使用的是CSS RESET，比如Eric Meyer的RESET CSS v2.0，在你的CSS中使用@import，这样它就能在应用你的CSS之前完成它的工作，从而防止冲突。