CSS @import 与链接
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7199364/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
@import vs link
提问by L84
First I know the title says this is a duplicate question as asked here, here, and here. Everything I read on this topic is over two years old. A lot has changed in that time period so are the same thoughts still advisable?
首先，我知道标题说这是一个重复的问题，如此处、此处和此处所问。我读到的关于这个主题的所有内容都已经超过两年了。在那段时间里发生了很多变化，所以同样的想法仍然是可取的吗？
Here is an example, I use @import inside a stylesheet to bring in my reset CSS and a couple other styles. Should I change that from @importto <link>? According to this articleI should use link. So I ask other developers, what is truly the best way as to date (August 25, 2011)
这是一个示例，我在样式表中使用 @import 来引入我的重置 CSS 和其他一些样式。我应该把它从@import改为<link>吗？根据这篇文章，我应该使用链接。所以我问其他开发人员，到目前为止，什么才是真正最好的方法（2011 年 8 月 25 日）
回答by Wesley Murch
Not much if anything has changed in the past year or two, and we're still dealing with a lot of the same browsers from then, so you should not change your practice.
如果在过去的一两年中发生了任何变化，那么变化不大，而且从那时起我们仍在处理许多相同的浏览器，因此您不应该改变您的做法。
<link>is preferred in all cases over @import, because the latter blocks parallel downloads, meaning that the browser will wait for the imported file to finish downloading before it starts downloading the rest of the content.
<link>在所有情况下都优于@import，因为后者会阻止并行下载，这意味着浏览器将在开始下载其余内容之前等待导入的文件完成下载。
You can see this in great detail here:
您可以在此处详细了解这一点：
http://www.stevesouders.com/blog/2009/04/09/dont-use-import/
http://www.stevesouders.com/blog/2009/04/09/dont-use-import/
So, while @importmay be convenient, that's all it offers. If you really want to take advantage of fast loading times, use the minimum number of stylesheets (probably one in most cases), write good CSS with efficient selectors (the usual stuff), minify it, and use a <link>tag.
所以，虽然@import可能很方便，但这就是它所提供的。如果你真的想利用快速加载时间，使用最少数量的样式表（在大多数情况下可能是一个），用高效的选择器（通常的东西）编写好的 CSS，缩小它，并使用<link>标签。
This was going to be a comment but it got too long:
这将是一个评论，但它太长了：
Instead of @import(I know it isvery convenient), you should combine the files into one when your site goes live. You shouldn't be tweaking at that point anyways, and there are a number of tools to help minify it. Personally, using PHP, I have a config file where I define all the CSS files that are written to a separate CSS file (the one I will reference in the <link>tag), then if the cached version is old (either determined manually or automatically), it combines/minifies them and writes the content to the "cache" file, and returns a timestamp query string to append to the CSS file name to force a fresh download.
相反的@import（我知道这是很方便的），那么当你的网站开始运行的文件合并成一个。无论如何你都不应该在那个时候进行调整，并且有许多工具可以帮助缩小它。就我个人而言，使用 PHP，我有一个配置文件，我在其中定义了所有写入单独 CSS 文件的 CSS 文件（我将在<link>标签中引用的那个），然后如果缓存版本是旧的（手动或自动确定） ，它将它们组合/缩小并将内容写入“缓存”文件，并返回一个时间戳查询字符串以附加到 CSS 文件名以强制重新下载。
If you are using PHP as well, I highly recommend cssmin, it can parse stylesheets for @importand pull the content into one file, as well as handle all aspects of minification.
如果您也使用 PHP，我强烈推荐cssmin，它可以解析样式表@import并将内容拉入一个文件，以及处理缩小的所有方面。
