基本上，我想知道@import将样式表导入到现有样式表中而不是仅添加另一个样式表的优点/目的是什么？
<link rel="stylesheet" type="text/css" href="" />
到文件头？
包括CSS的最佳方法？为什么要使用\`import？
第3148篇《包括CSS的最佳方法？为什么要使用\`import？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点
共12个回答
几乎没有理由使用@import，因为它会分别加载每个导入的CSS文件，并且会大大降低您的网站速度。如果您对处理CSS的最佳方式感兴趣（涉及页面速度），则应采用以下方式处理所有 CSS代码：
- 打开所有CSS文件，然后复制每个文件的代码
- 将所有代码粘贴到页面的HTML标头中的单个STYLE标记之间
- 除非您有大量代码或有特殊需要，否则切勿使用CSS @import或单独的CSS文件来提供CSS。
此处提供更多详细信息：http : //www.giftofspeed.com/optimize-css-delivery/
上面效果最好的原因是，它为浏览器创建的请求更少，并且可以立即开始呈现CSS，而无需下载单独的文件。
我认为关键是您实际上编写多个CSS样式表的两个原因。
- 您编写多张工作表是因为网站的不同页面需要不同的CSS定义。或者至少不是全部它们都需要另一页需要的所有CSS定义。因此，请拆分CSS文件，以优化在不同页面上加载的工作表，并避免加载太多CSS定义。
- 想到的第二个原因是您的CSS太大了，变得难以处理，并且为了更轻松地维护大型CSS文件，您将它们拆分为多个CSS文件。
出于第一个原因，<link>将应用附加标记，因为这允许您为不同页面加载不同的CSS文件集。
由于第二个原因，该@import语句似乎最方便，因为您获得了多个CSS文件，但是加载的文件始终相同。
从加载时间的角度来看，没有什么不同。无论如何实现，浏览器都必须检查并下载单独的CSS文件。
有时您必须使用@import而不是inline。如果您正在处理具有32个或更多css文件的复杂应用程序，并且必须支持IE9，则别无选择。IE9会忽略前31个后的任何CSS文件，其中包括和内联CSS。但是，每张纸可以导入其他31张纸。
如果您正在使用CSS RESET，请在CSS中使用@import，例如Eric Meyer的Reset CSS v2.0，因此它在应用CSS之前就已经完成了工作，从而避免了冲突。
引用自http://webdesign.about.com/od/beginningcss/f/css_import_link.htm
@import方法的主要目的是在页面上使用多个样式表，但是<head>中只有一个链接。例如，一家公司可能对站点上的每个页面都有一个全局样式表，而子部分具有仅适用于该子部分的其他样式。通过链接到子节样式表并在该样式表的顶部导入全局样式，您不必维护一个巨大的样式表，其中包含站点和每个子节的所有样式。唯一的要求是，所有@import规则都必须位于其余样式规则之前。请记住，继承仍然是一个问题。
我使用@import的一个地方是当我在做两个版本的页面时，英语和法语。我将使用main.css用英语构建我的页面。构建法语版本时，将链接到法语样式表（main_fr.css）。在法语样式表的顶部，我将导入main.css，然后为法语版本中我需要的不同部分重新定义特定规则。
它们非常相似。有人可能会说@import更易于维护。但是，每个@import都会以与使用“ link”方法相同的方式向您收取新的HTTP请求。因此，在速度方面并没有更快。正如“ duskwuff”所说，它不会同时加载，这是一个失败。
在头中添加CSS样式表与使用导入功能并没有太大的区别。using @import通常用于链接样式表，以便可以轻松扩展样式表。它可以用于轻松交换不同的颜色布局，例如，结合一些常规的CSS定义。我要说的主要优点/目的是可扩展性。
我也同意xbonez的评论，因为可移植性和可维护性是附加的好处。
@import出于速度原因，最好不要在页面中使用CSS。看到这篇出色的文章以了解为什么不这样做：http : //www.stevesouders.com/blog/2009/04/09/dont-use-import/
而且，通常很难对通过@import标记提供服务的css文件进行最小化和合并，因为minify脚本无法从其他css文件中“剥离” @import行。当将它们包含为<link标记时，可以使用现有的minify php / dotnet / java模块进行缩小。
因此：使用<link />代替@import。
从页面速度的角度来看，@import几乎不应该使用CSS文件，因为它可以防止样式表被同时下载。例如，如果样式表A包含以下文本：
@import url("stylesheetB.css");
那么在下载第一个样式表之前，可能不会开始下载第二个样式表。另一方面，如果两个样式表都在<link>HTML主页面的元素中引用，则可以同时下载两个样式表。如果两个样式表总是一起加载，将它们简单地组合到一个文件中也很有帮助。
有时在某些情况下@import适当，但通常是例外，而不是规则。
使用链接方法，样式表被并行加载（更快更好），几乎所有浏览器都支持链接
import会逐一加载（慢速加载）任何额外的css文件，并且可能会给您带来Flash风格的内容
相似问题
问题类别
我认为@import在为多个设备编写代码时最有用。包含条件语句，仅包含所讨论设备的样式，然后仅加载一张纸。您仍然可以使用链接标记添加任何常见的样式元素。