基本上我想知道使用@import将样式表导入现有样式表而不是添加另一个样式表的优点/目的是什么？
<link rel="stylesheet" type="text/css" href="" />
到文件的头部？
dus*_*uff 329
从页面速度的角度来看,@import几乎不会使用CSS文件,因为它可以防止同时下载样式表.例如,如果样式表A包含文本:
@import url("stylesheetB.css");
然后在下载第一个样式表之前,可能无法开始下载第二个样式表.另一方面,如果两个样式表都在<link>主HTML页面的元素中引用,则可以同时下载两个样式表.如果两个样式表总是一起加载,那么简单地将它们组合到一个文件中也会很有帮助.
偶尔会出现@import适当的情况,但它们通常是例外,而不是规则.
Chr*_*ris 178
我打算扮演魔鬼的拥护者,因为当人们同意太多时,我讨厌它.
在任何给定时间,您都要优化两个变量 - 代码的性能和开发人员的性能.在许多情况下,如果不是大多数情况,更重要的是使开发人员更有效率,然后才能使代码更高效.
如果你有一个依赖于另一个的样式表,最合乎逻辑的做法是将它们放在两个单独的文件中并使用@import.对于下一个查看代码的人来说,这将是最合乎逻辑的意义.
(这种依赖会什么时候发生？在我看来这很少见 - 通常一个样式表就足够了.但是,有一些合理的地方可以把东西放在不同的CSS文件中:)
- 主题:如果您对同一页面有不同的配色方案或主题,它们可能会共享一些但不是所有组件.
- 子组件:一个人为的例子 - 假设你有一个包含菜单的餐馆页面.如果菜单与页面的其他部分非常不同,那么如果菜单位于自己的文件中则更容易维护.
通常样式表是独立的,因此将它们全部包含在内是合理的<link href>.但是,如果它们是依赖层次结构,那么您应该做出最符合逻辑意义的事情.
Python使用import; C用途包括; JavaScript需要.CSS有导入; 当你需要它时,使用它!
任何类型的多个CSS请求- 无论是通过链接还是通过@imports - 都是高性能网站的不良做法.一旦你处于优化问题的地步,你所有的CSS都应该通过一个缩小器.Cssmin结合了import语句; 正如@Brandon指出的那样,grunt也有多种选择.(另见这个问题).
一旦你处于缩小阶段,<link>就像人们指出的那样更快,所以最多链接到几个样式表,如果可能的话,不要@import.
在网站达到生产规模之前,代码组织和逻辑更重要,而不是更快.
Sto*_*ely 23
@import在您的网站中使用外部层叠样式表！更新日期：2022 年 8 月 22 日
（过去10年，网络上发布了很多关于使用的虚假@import信息，我打算纠正。所以请仔细阅读下面我的信息。）
规则一
永远不要依赖 JavaScript API 或技巧来管理级联样式表！不要依赖第 3 方供应商 CSS 解决方案！切勿使用 SASS、React、Modernizr、Bootstrap 或 Angular 来管理 CSS。我知道，我都用过。始终使用手写的 CSS 文本文件自行管理级联样式表，您的网站不仅运行速度更快，而且您将完全控制您的网站设计和用户体验。如果您依赖这些设计不良的系统，它们将在许多情况下失败，减慢您的网站速度，并在许多版本的旧浏览器中失败......多得难以计数。
第二条规则
是的，总是使用@import！它作为使用 CSS 的现代解决方案非常有效。我强烈推荐它！它已在数百种浏览器中使用了 20 多年，没有出现任何问题。@import许多年轻、缺乏经验的开发人员做出了 错误的假设，包括@import在典型的页面请求期间“阻止”网页脚本、HTML 或其他资源的下载。这些都是完全错误的。下面我来证明一下！
第三条规则
@import在 CSS 中使用不会减慢页面加载或解析速度。@imports嵌入元素中的多个组合<style>全部并行下载。（即使对于非常旧的 IE 浏览器也是如此）。@import在从外部样式表内部调用多个规则的情况下<link>，这些规则也全部并行下载并使用与保存它们的父样式表相同的连接。它们只是不会与父表及其可能包含的任何 CSS 并行下载。稍后会详细介绍。
规则四
CSS 不需要压缩、最小化、预处理等。CSS 下载大小或使用 @import 的多个外部 CSS 文件在 Web 上不是问题。style sheets are rarely over 30 kilobytes尺寸最大。将此与1-5 Megabytes in a typical JavaScript API library占用带宽的 进行比较，您就会明白为什么 CSS 下载不会延迟或减慢浏览器内容的速度。确保你认识到这个事实。这些微小的导入样式文本表是典型网页下载的更大下载足迹的一部分，当使用这些现代 JavaScript 库、表情符号、图像、视频和媒体文件推入块流中时，其大小会爆炸。现代网页显示请求期间的典型用户浏览器。这就是为什么您也不应该压缩 CSS 或使用 SASS 对其进行预处理，因为下载时间或解析和渲染树显示的节省几乎为零。
阻止 CSS 不是问题，@import 也不是错误或过时的技术。它是一种非常可靠、较旧的编码解决方案，已运行良好 20 多年。
但您可能仍然想知道如何才能@import真正帮助我？
让我们看一个例子。大多数开发人员导入外部样式表来划分他们想要在模块中管理或对某些浏览器隐藏的样式部分。在下面的链接表中，所有导入的工作表都添加到单个父样式表中，以便在一个位置管理它们。当浏览器在 HTML 下载期间解析链接工作表时，将打开（或重用）连接，并且所有这些导入的工作表通过该连接相互并行下载。因此，我们将添加父表来保存导入的外部 CSS 表，如下所示：
<link media="screen" rel="stylesheet" type="text/css" href="parent.css" />
...然后在上面的parent.css表中我们有以下@import子项。它们都应该在大多数浏览器中并行下载，并共享相同的 TCP 连接。大多数现代网络浏览器都有 6 个或更多，因此这意味着 CSS 永远不会阻止 HTML 或其他页面的下载和解析。另外，2022 年的许多服务器现在支持 HTTP2，其中包括多路复用，这意味着所有这些微小的 CSS 文件下载现在可以与其他请求共享单个连接。这些小文本文件可以在现代浏览器中快速下载@import！
@import url('child1.css');
@import url('child2.css');
@import url('child3.css');
@import url('child4.css');
在下面的第二个示例中，@import嵌入 HTML<style>标记中的这些声明也应该全部并行下载，只是随机的。同样，这在许多旧浏览器和新浏览器中都是这样工作的。根据我的阅读，他们可能会遇到@import这样的顺序问题，但是在这种类型的设计中，您的 CSS 应该很少依赖于级联顺序。顺便说一句，书写格式有很多种@import。编写此类媒体查询时使用该格式@import url('mycss.css');可以提高现代 HTML5 浏览器可靠地解析导入文件 CSS 代码的机会：
<style>
@import url('child1.css');
@import url('child2.css');
@import url('child3.css');
@import url('child4.css');
</style>
唯一@import有问题的时间是以下有限的场景：
@import链接的 CSS 组合无法并行下载。这也会影响<link>CSS 下载，因此这不是针对@import.<link>父样式表保存导入的工作表，因为父工作表必须首先连接并解析其 CSS 文件，所以它会向服务器添加一个额外的连接。这是合乎逻辑的，也是可以预料到的。如果您的工作表只有导入而没有 CSS（我建议这样做，并且没有要解析的 CSS），@import 会立即开始，并且应该使用与父级相同的连接来下载文件。<link>父样式表包含多个导入的表，如果父表在 @imports 声明之后还有附加的 CSS，那么是的，将会存在真正的“阻塞”CSS 连接。在这种情况下，必须首先下载父 CSS 文件，首先完成其 CSS 解析并下载，发现 @import，然后下载 @import 样式，并将它们放在文件中的 CSS 之前，然后文件完成。这是合乎逻辑的，也是为什么你不应该@import在任何 CSS 样式表中将 CSS 与样式规则结合起来。我从来没有这样做。如果删除父文件中的 CSS，导入会立即通过父文件连接调用其文件，不会有任何延迟。<link>没有导入规则的样式表与带有 或嵌入 的链接样式表组合@import在一起，则仅在 Internet Explorer 中，它们通常不会并行下载。其他浏览器可以很好地管理这个问题。如前所述，这可能与 IE 的有限浏览器连接有关。<style>@import因此，根据这些规则，在大多数情况下，@import 工作得很好。主要问题是在将 @import 添加到包含大量纯 CSS 的工作表中时。这种类型的事情是有道理的，并且会导致长时间的延迟，因为父级解析自己的 CSS 然后发现其他@imports.
请记住，现代浏览器有大约 6 个可用连接，因此@import不会成为瓶颈，拥有太多文件或太多大文件加上非异步 JavaScript 将阻碍网页中的解析和渲染。顺便说一句，您现在典型的 JavaScript API 下载量是 1.5 MB！
使用@import 还有很多充分的理由！
使用 @import 的一个重要原因是进行跨浏览器设计。一般来说，导入的工作表对许多较旧的浏览器是隐藏的，这使您可以为非常旧的浏览器（例如 Netscape 4 或更旧系列、适用于 Mac 的 Internet Explorer 5.2、Opera 6 及更早版本以及适用于 PC 的 IE 3 和 4）应用特定格式。 ...然后使用@import添加现代样式表这些浏览器无法看到，因为许多旧浏览器无法识别某些版本的@import.
例如，添加所有浏览器（无论新旧）都能看到的普通样式表：
<link media="screen" rel="stylesheet" type="text/css" href="styles.css" />
...里面有这个CSS...
body {
font-size:13px;
}
现在，在导入的自定义表单 (newerbrowsers.css) 中，只需应用较新的样式即可仅针对较新的浏览器覆盖上述样式。较新的浏览器使用“em”单位，较旧的浏览器使用“px”。@import许多较旧的浏览器都看不到下面的这个版本，包括 IE 1-7、MAC IE 5、Netscape 4 和许多其他浏览器：
<link media="screen" rel="stylesheet" type="text/css" href="newerbrowsers.css" />
...只有较新的浏览器才会看到这个@import。使用带有“all”的 @import 格式，它将对 IE1-7 等浏览器隐藏！
@import 'imported.css' all;
...在 @import 中使用此 CSS...
html body {
font-size:1em;
}
使用“em”单位优于“px”单位，因为它允许字体和设计根据用户设置进行拉伸，而旧版浏览器使用基于像素的效果更好（这是刚性的，无法在浏览器用户设置中更改） 。大多数旧版浏览器看不到导入的工作表。
我在上面发布的上述@import工作表规则现在对下面列出的所有这些旧浏览器都隐藏了，您现在可以单独设置样式或完全忽略它们，从而使您的团队现在能够为现代 HTML5 浏览器进行设计！
- Netscape 1-4.8
- Opera 1-3.5
- Windows Internet Explorer 1-7.x
- Macintosh Internet Explorer 2-4.5
- Konqueror 1-2.1
- Windows Amaya 1-5.1
- iCab 1-2
- OmniWeb
- Many more antiquated browsers...
您可能会说，“谁在乎旧版浏览器！” 尝试访问一些较大的过时的政府或企业网络，其中有数千台旧的 Windows PC 或 Mac，您仍然会看到那些旧的浏览器正在使用！但这确实是一个很好的设计，因为您今天喜欢的浏览器有一天也会过时和过时。以有限的方式使用 CSS 意味着您现在拥有一个更大且不断增长的用户代理组，这些用户代理不能很好地与您的网站配合使用。
使用@import，您的跨浏览器网站兼容性现在将达到 99.99% 的网络浏览器显示饱和度，因为许多浏览器可以理解导入的工作表。您还可以使用我上面的解决方案管理旧版浏览器的 CSS 链接 CSS，并使用导入的 CSS 来管理所有较新的浏览器样式和布局。它保证您为较旧的代理应用基本 CSS，但为较新的代理提供更高级的 CSS3+。这使得较旧的浏览器可以访问内容，而不会影响较新的桌面浏览器所需的丰富视觉显示，也无需管理数百个复杂的 CSS 黑客和针对各种浏览器版本的修复。
还要记住，现代浏览器在第一次调用网站后会很好地缓存 HTML 结构和 CSS。这就是使用链接和导入的外部 CSS 的全部目的。一次调用，一次缓存！此外，无论如何，对服务器的多次调用不再是以前的瓶颈。上传到智能设备的大量 Javascript API 和 JSON 以及设计不当、页面之间不一致的 HTML 标记是当今渲染缓慢的主要驱动因素。例如，在许多 Google 网站页面上查看源代码，然后下载它附带的所有兆字节和异步 JavaScript！您的平均 Google 新闻页面远超过 6 兆字节的 ECMAScript，只是为了呈现一点点文本！坏的！！
几千字节的缓存 CSS 和一致的干净 HTML 以及较小的 Javascript 占用空间将以闪电般的速度在用户代理中呈现，这仅仅是因为浏览器一次性缓存外部文件、标记和 CSS。不要使用巨大的 Javascript 马戏技巧来操纵和改变网站的自然解析流程。依靠您自己创建的微小 CSS 文件，使用 @import 下载它们，您的网站每次都会完美显示。
顺便说一句，如果您想查看如何以这种方式使用跨浏览器 CSS 的示例，您可以在这里下载我的 CSS 框架：Universal CSS Framework
Koe*_*ers 14
@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.
mow*_*gli 11
使用链接方法,样式表是并行加载的(更快更好),几乎所有浏览器都支持链接
import会逐个加载任何额外的css文件(较慢),并且可以为您提供Flash Of Unstyled Content
@NeboIznadMišoGrgur
以下是使用@import的所有正确方法
@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import 'custom.css';
@import url("chrome://communicator/skin/");
@import "common.css" screen, projection;
@import url('landscape.css') screen and (orientation:landscape);
来源:https://developer.mozilla.org/en-US/docs/Web/CSS/@import
在头部添加css样式表与使用导入功能相比没有太大区别.使用@import通常用于链接样式表,以便可以轻松扩展.它可以用来轻松交换不同的颜色布局,例如结合一些通用的CSS定义.我想说主要优点/目的是可扩展性.
我同意xbonez评论,因为可移植性和可维护性是额外的好处.