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

时间:2017-07-23 16:17:16

标签: html css

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

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

2 个答案:

答案 0 :(得分: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 -->

答案 1 :(得分:0)

在网页中包含样式表有两种方法。您可以使用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方法的另一个用途是在页面上使用多个样式表,而在文档中只包含一个链接。

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