@import有什么意义？

Question

有人解释使用@import语法比使用标准链接方法包含css有什么好处吗？

Answer 1

正如回答者所说，它允许您将CSS分成多个文件，同时只链接到浏览器中的一个。

也就是说，在高流量网站上下载多个CSS文件仍然很浪费。我们的构建脚本实际上通过执行以下操作在发布模式下“编译”我们的CSS：

• 缩小所有CSS文件（删除额外的空格和注释）
• 我们有一个“core.css”文件，它只是@import语句的列表;在编译期间，每个都被该文件的缩小的CSS替换

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

Answer 2

如果在HTML文件中使用<link>，则所有这些文件都必须跟踪所有CSS文件。这显然使得对CSS和HTML文件的更改和添加更加困难。

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

Answer 3

@import允许您拥有可扩展的styesheet，而无需更改html。您可以link一次到主页，然后如果要添加或删除其他工作表，您的HTML不会更改。

此外，更小的文件可以帮助浏览器更好地进行缓存。如果在大型工作表的一部分中进行更改，则必须为每个用户再次下载整个工作表。如果样式被分成几个页面中的逻辑区域，则只需要下载包含已更改的部分的文件。当然，这是以额外的http请求为代价的。

Answer 4

另一个方便的位，虽然已经过时，但是Netscape 4无法处理@import，所以它是向NS4提供样式表的好方法，然后为标准中导入的更现代的浏览器提供另一个样式表合规的方式。

Answer 5

@import是CSS代码。 <link>是HTML代码。因此，如果您想在其他样式表中包含样式表（或者如果您无法更改HTML），那么@import就可以了。

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

应忽略样式规则之后出现的任何@import声明。 Internet Explorer从未尊重这一点;我相信其他浏览器都可以。这使得@import的用处不那么有用，因为导入的样式表中的规则将被导入样式表中具有相同特异性的规则覆盖。

Answer 6

它允许您将逻辑CSS文件分布在多个物理文件中。例如，帮助团队发展。当您想要按功能区域（一个用于网格，一个用于列表等）分离很多CSS文件时，也可以在同一个逻辑文件中访问。

Answer 7

说你为Massive Dynamics，Corp工作。它有一个Widgets部门。 Widgets部门有一个会计部门。帐户分为应付帐款和应收帐款。

使用@include，您可以使用一个顶级 global.css 样式表启动网站，该样式表适用于所有内容。

然后为Widgets部门创建第二个样式表 widgets.css 。它包括全局的样式和它自己的样式（如果需要，可以覆盖全局样式，因为Cascade）。然后为帐户创建第三个 accounts.css 。它@includes widgets.css ，这意味着它还包括 global.css 。泡沫，冲洗，重复。