@import 函数允许我们包含来自外部文件的样式。当我们的项目有很多样式时，它非常有用。我们不需要创建一个文件来定义所有样式，而是可以将它们拆分为多个文件，并将它们组合到主文件中。
/* 主文件 */
@import 'common.css';
@import 'components.css';
@import 'pages.css';
...
使用 @import 可以使我们的样式更有条理，更易于维护。但是，在继续渲染页面之前，浏览器必须逐个下载并解析每个 CSS 文件。CSS 文件按顺序下载，而不是并行下载。
它还会根据 CSS 文件的数量来降低网站的速度。
在风格仍然井然有序的情况下，有几种方法可以解决这些问题。
使用 CSS 预处理器
我们可以使用 CSS 预处理器，如 Less、SASS。它们不仅提供了将 @import 作为普通 CSS 使用的功能，而且还可以将样式合并到单个最终 CSS 文件中。
使用多个 link 标签
每个 CSS 都可以通过单独的 link 标签下载，如下所示：
<head>
<link rel="stylesheet" type="text/css" href="common.css" />
<link rel="stylesheet" type="text/css" href="components.css" />
...
</head>
注意：在旧版本的 Internet Explorer 中，@import 函数的行为与在页面底部插入目标 CSS 的行为相同
这里还涉及一道常见的面试题。
页面导入样式时，使用 link 和 @import 有什么区别？
-
link 属于 XHTML 标签，除了加载 CSS 外，还能用于定义 RSS，定义 rel 连接属性等作用；而 @import 是 CSS 提供的，只能用于加载 CSS； - 页面被加载的时，
link 会同时被加载，而 @import 引用的 CSS 会等到页面被加载完再加载； -
@import 是 CSS2.1 提出的，只在 IE5 以上才能被识别，而 link 是 XHTML 标签，无兼容问题； -
link 方式的样式的权重高于 @import 的权重。
