@import vs link

Question

首先我知道标题说这是一个重复的问题,在这里,这里和这里问.我在这个主题上读到的所有内容都已超过两年了.那个时期有很多变化,所以同样的想法仍然可取吗？

这是一个例子,我在样式表中使用@import来引入我的重置CSS和其他几个样式.我应该改变,从@import到<link>？根据这篇文章,我应该使用链接.所以我问其他开发者,到目前为止最真实的方式是什么(2011年8月25日)

Answer 1

如果在过去的一两年里发生了任何变化,那就太多了,我们还在处理很多相同的浏览器,所以你不应该改变你的做法.

<link>在所有情况下都优先选择@import,因为后者会阻止并行下载,这意味着浏览器会在开始下载其余内容之前等待导入的文件完成下载.

你可以在这里详细看到这个:

http://www.stevesouders.com/blog/2009/04/09/dont-use-import/

因此,虽然@import可能很方便,但它提供的只是一切.如果你真的想利用快速加载时间,可以使用最少数量的样式表(在大多数情况下可能只有一个),用高效的选择器(通常的东西)编写好的CSS,缩小它并使用<link>标签.

这将是一个评论,但它太长了:

相反的@import(我知道这是很方便的),那么当你的网站开始运行的文件合并成一个.你不应该在那时进行调整,并且有许多工具可以帮助缩小它.就个人而言,使用PHP,我有一个配置文件,我在其中定义所有写入单独CSS文件的CSS文件(我将在<link>标签中引用的文件),然后如果缓存版本是旧的(手动或自动确定) ,它将它们组合/缩小并将内容写入"缓存"文件,并返回时间戳查询字符串以附加到CSS文件名以强制重新下载.

如果你也使用PHP,我强烈推荐cssmin,它可以解析样式表@import并将内容拉成一个文件,以及处理缩小的所有方面.