为什么不要使用CSS @import

不要使用CSS @import

CSS @import功能使得可以在文档中包含外部CSS文件。它可以被用作在HTML文档的样式标签中导入CSS脚本或在CSS文件中添加额外规则的一种方式。

为什么要避免使用@import？

CSS @import因加载每个单独导入的文件而不是并行加载而臭名昭著。换句话说，访问者的浏览器必须等待每个导入的文件加载，而不是能够一次加载所有CSS文件。这可能会大大减慢您的网站，具体取决于您导入的CSS文件数量。此外，当您使用@import来包含额外的CSS文件时，它会创建额外的HTTP请求，访问者的浏览器必须处理的额外请求。

如何检测我的网站是否使用@import？

使用CSS交付工具来自动检测您的网页上CSS @import标签的使用。

@import功能可以在HTML页面（在样式标签中）或CSS文件中使用。一个关键特征是您总是在CSS脚本的最顶部找到它；@import必须在该位置使用。

在HTML文件中的使用

在HTML页面中，@import代码通常看起来像这样：

<style type="text/css">@import url("cssfile.css");a {color : #000; }# more CSS rules below #</style>

在CSS文件中的使用

在CSS文件中，您通常可以在文档的最顶部找到它，看起来像这样：

@import url("cssfile.css");

如何移除和替换@import？

您首先应该做的是从您的CSS代码中移除所有@import规则。然后，您打开用于网页的所有CSS文件（也包括您不使用@import的文件），复制并粘贴这些文件中的所有代码，将它们全部合并为一个大的CSS脚本，并从HTML头部的样式标签中调用它（这也可以用JavaScript完成）。将所有CSS脚本合并为一个更大的脚本并在HTML标记中内联它是处理CSS脚本时提高页面速度的最佳方式。除非您的网站使用非常大的CSS脚本，否则没有理由调用单独的CSS文件（甚至单个文件）。