Question

每天都在学习关于CSS的新内容，而且我遇到了@import。使用它的优点和缺点是什么。

我知道您可以使用@import在一个样式表中链接所有样式表。然后将一个样式表链接到所有HTML文档，并且每个HTML文档上都没有多个CSS URL。但使用这种方法有哪些优点或缺点？

Answer 1

在正常情况下，使用@import方法加载CSS文件可能会显着增加页面加载时间，因为随后会逐个引用各个文件。在文件A下载之前，文件B不会加载。另一方面，使用<link>标签引用的CSS可以同时下载。

虽然这似乎是一个彻头彻尾的劣势，但使用@import方法确实带来了非常突出的优势;组织。

随着您的项目规模和复杂性的增长，维护您的CSS文件，无论多么有组织和挑剔，至少可以说是一件苦差事。 @import方法可帮助您将大量样式表分解为更易于理解和更合理的部分。

为了说明，您通常会通过单个<link>标记引用您的CSS文件，如下所示：

<link href="/styles/main.css" rel="stylesheet" type="text/css">

此样式表可以引用其他几个辅助样式表

@import url('/styles/navbar.css')
@import url('/styles/header.css')
@import url('/styles/typography.css')
@import url('/styles/grid.css')

这只是我头脑中的一个基本例子，但希望你能看到更有组织的系统的潜力。这也可以使其他团队成员更容易理解已声明引用样式的位置。

Blockquote 注意只需确保这些导入位于样式表的最顶层。在此之前不应该有任何声明/内容。这还包括<-- comments -->

Answer 2

在网页中包含样式表有两种方法。您可以使用LINK标记：

<link rel='stylesheet' href='a.css'>

或者您可以使用@import规则：

<style>
@import url("/styles/default.css");
</style>

我更喜欢使用LINK来简化 - 你必须记住将@import放在样式块的顶部，否则它将无法工作。事实证明，避免@import对性能也有好处。

@IMPORT和LINK之间的差异

在决定使用哪种方法来包含样式表之前，您应该了解这两种方法的用途。

链接 - 链接是在网页上包含外部样式表的第一种方法。它旨在将您的网页与样式表链接在一起。它将添加到您的HTML文档中，如下所示：

<link href="styles.css" rel="stylesheet">

为何使用链接？

使用链接样式表的首要原因是为您的客户提供备用样式表。 Firefox，Safari和Opera等浏览器支持rel =＆＃34;备用样式表＆＃34;属性以及何时有可用将允许查看者在它们之间切换。您还可以使用JavaScript切换器在IE中的样式表之间切换。出于可访问性目的，这通常与缩放布局一起使用。

使用@import的一个缺点是，如果你只有一个非常简单的@import规则，那么你的页面可能会显示一个无格式内容的闪存＆＃34; （FOUC）正在加载。这可能会让观众感到不快。

对此的一个简单修复是确保您的。

中至少有一个附加元素或元素

@import - 导入允许您将一个样式表导入另一个样式表。这与链接方案略有不同，因为您可以在链接的样式表中导入样式表。如果在HTML文档的头部包含@import，则其编写如下：

<style type="text/css">@import url("styles.css");</style>

为什么使用@IMPORT？

许多年前，使用@import（或与之一起）使用的最常见原因是因为较旧的浏览器无法识别@import，因此您可以隐藏它们的样式。

通过导入样式表，您实际上可以将它们提供给更现代，符合标准的浏览器，同时隐藏＆＃34;它们来自较旧的浏览器版本。

@import方法的另一个用途是在页面上使用多个样式表，而在文档中只包含一个链接。

从标准的角度来看，链接到外部样式表或导入它没有区别。无论哪种方式都是正确的，任何一种方式都可以同样有效（在大多数情况下）。但是，您可能希望使用一个而不是另一个原因。

在CSS中使用@import有什么优缺点

2 个答案: