使用@import声明是一种糟糕的做法吗



可能重复:
CSS 中@import和链接之间的差异

我读过关于CSS @import的文章,认为这是一种糟糕的做法,我想知道我正在使用的方法。

我目前正在使用WordPress构建一个网站,它通过链接引用导入每个插件的样式表,并且主样式表以相同的方式链接,然而,主样式表目前包含几个@import声明,我认为我应该将其移到页眉中它们所使用的适当页面中(其中两个仅用于某些页面)。

我的担忧是否合理,使用这些@import声明会产生什么影响?

网络提供了很多关于这个主题的信息,我建议阅读:

  • http://www.stevesouders.com/blog/2009/04/09/dont-use-import/
  • @导入与链接
  • @import或<链接>用于导入样式表

为了简单起见,我认为应该使用LINK——必须记住将@import放在样式块的顶部,否则它将不起作用。事实证明,避免@import对性能更好。

链接

  • 链接是在网页上包含外部样式表的第一种方法。它旨在将您的网页与样式表链接在一起

导入

  • 导入允许您将一个样式表导入到另一个。这与链接场景略有不同,因为您可以在链接的样式表中导入样式表

使用@import最常见的原因是,旧的浏览器无法识别@import,因此可以对它们隐藏样式。

此链接将解决您的所有查询

@import和CSS链接之间有什么区别?

使用导入规则本身并不是一种糟糕的做法。您只需要记住,只有在下载了包含导入的文件后才能处理导入。因此,如果你有一堆包含这些语句的文件,你的受众可能需要很长时间才能看到应用的css。

每个@import语句都会创建一个新的http请求,因为它发生在客户端。因此,从这个角度来看,你正在伤害连接缓慢的访客,比如Edge或3G上的移动访客。

我经常听到的一条经验法则是立即合并所有需要的CSS,然后只将@import用于以后需要的东西。

出于速度原因,最好不要使用@import在页面中包含CSS

导入允许您一个样式表导入另一个。这与链接场景略有不同,因为您可以在链接的样式表中导入样式表。较旧的浏览器无法识别@import,因此您可以对它们隐藏样式,这就是@import

选中此项:
http://www.stevesouders.com/blog/2009/04/09/dont-use-import/
css@import

相关内容

最新更新