@import有什么意义?

时间:2020-03-06 15:01:39  来源:igfitidea点击:

有人可以解释使用@import语法与仅包括使用标准链接方法的CSS相比有什么好处吗?

解决方案

它使我们可以将逻辑CSS文件分布在多个物理文件上。例如,有助于团队发展。当我们有许多CSS文件要按功能区域分开时(一个用于网格,一个用于列表等),让它们可以在同一逻辑文件中访问时,此功能也很有用。

如果在HTML文件中使用<link>,那么所有这些文件都必须跟踪所有CSS文件。显然,这会使更改和添加(对于CSS和HTML文件)更加困难。

使用@import可以从理论上将无限数量的更改减少到一个。

@import允许我们具有可扩展的样式表,而无需更改html。我们可以一次将其链接到主工作表,然后,如果我们想添加或者删除其他工作表,则html不会改变。

此外,更多的较小文件可帮助浏览器进行更好的缓存。如果我们在一个较大的工作表的一部分中进行更改,则必须为每个用户重新下载整个工作表。如果将样式分成几张纸分成多个逻辑区域,则仅需要下载包含已更改部分的文件。当然,这是以额外的http请求为代价的。

另一个方便的地方,尽管已经过时了,但是Netscape 4无法处理@import,因此这是一种向NS4提供样式表的好方法,然后为以标准兼容方式导入的更现代的浏览器提供了另一个样式表。

正如回答者所说,它使我们可以将CSS拆分为多个文件,而仅在浏览器中链接到一个文件。

话虽如此,在高流量的网站上下载多个CSS文件仍然很浪费。在发布模式下构建时,我们的构建脚本实际上通过以下步骤"编译"我们的CSS:

  • 最小化所有CSS文件(多余的空格和注释已删除)
  • 我们有一个" core.css"文件,它只是" @import"语句的列表;在编译过程中,每一个都由该文件的缩小CSS替换

因此,我们最终在生产中使用了一个最小的CSS文件,而在开发模式下,我们使用了单独的文件来简化调试。

@import是CSS代码。 <link>是HTML代码。因此,如果要在其他样式表中包含样式表(或者不能更改HTML),则可以使用@import。

根据CSS规范,所有@import声明必须出现在样式表中的任何样式规则之前。换句话说,一切都在样式表的顶部

出现在样式规则之后的所有@import声明都应被忽略。 Internet Explorer从不尊重这一点。我相信其他浏览器也可以。这使@import的用处不大,因为导入的样式表中的规则将被导入样式表中具有相同专一性的规则覆盖。

假设我们为Massive Dynamics,Corp.工作。它有一个Widgets部门。窗口小部件部门有一个会计部门。帐户分为应付帐款和应收帐款。

使用@include,我们可以使用一个适用于所有内容的顶级global.css样式表来启动网站。

然后,创建第二个样式表,即Widgets部门的widgets.css。它包括全局样式及其自己的样式(由于级联,如果需要,可以覆盖全局样式)。然后,为帐户创建第三个account.css。它@包含widgets.css,这意味着它也包含global.css。泡沫,冲洗,重复。