在头部添加css样式表与使用导入功能并没有太大区别。使用@import通常用于链接样式表，这样可以轻松地扩展样式表。它可以用来轻松地交换不同的颜色布局，例如结合一些一般的css定义。我认为主要的优势/目的是可扩展性。

我也同意xbonez的评论，因为可移植性和可维护性是额外的好处。

我经历了一个可以添加链接样式表的“高峰”。虽然添加任何数量的链接Javascript对我的免费主机提供商来说都不是问题，但在外部样式表数量翻倍后，我就崩溃/变慢了。 正确的代码示例是:

@import 'stylesheetB.css';

所以，就像Nitram提到的那样，我发现在硬编码设计时，拥有一个好的心理地图是很有用的。 祝成功。 如果有语法错误的话，我原谅你。

几乎没有理由使用@import，因为它会分别加载每个导入的CSS文件，并会显著降低网站的速度。如果你对处理CSS的最佳方式感兴趣(当涉及到页面速度时)，以下是你应该如何处理所有CSS代码:

打开所有CSS文件，复制每个文件的代码 将所有代码粘贴到页面HTML头中的单个STYLE标记之间 永远不要使用CSS @import或单独的CSS文件来交付CSS，除非你有大量的代码或有特定的需要。

更多详细信息请访问:http://www.giftofspeed.com/optimize-css-delivery/

上面的效果最好的原因是因为它为浏览器创建了更少的请求，它可以立即开始呈现CSS，而不是下载单独的文件。

使用link方法，样式表可以并行加载(更快更好)，而且几乎所有浏览器都支持link

import加载任何额外的css文件一个接一个(较慢)，并可以给你Flash的无风格的内容

现代浏览器可以使用css文件定义全局变量。该文件可以导入到其他可以使用该变量的css文件中。

例如，要在站点中使用一致的颜色:

colors.css :根{ ——bg-dark: # ffffff; ｝ home.css @ import“colors.css”; 身体:var(——bg-dark)

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