基本上,我想知道使用@import将样式表导入到现有的样式表中,而不是仅仅添加另一个样式表的优势/目的是什么…

<link rel="stylesheet" type="text/css" href="" />

文件的开头?


当前回答

我认为@import在为多种设备编写代码时最有用。包含一个条件语句来只包含有问题的设备的样式,然后只加载一个表。您仍然可以使用link标记来添加任何公共样式元素。

其他回答

在头部添加css样式表与使用导入功能并没有太大区别。使用@import通常用于链接样式表,这样可以轻松地扩展样式表。它可以用来轻松地交换不同的颜色布局,例如结合一些一般的css定义。我认为主要的优势/目的是可扩展性。

我也同意xbonez的评论,因为可移植性和可维护性是额外的好处。

使用link方法,样式表可以并行加载(更快更好),而且几乎所有浏览器都支持link

import加载任何额外的css文件一个接一个(较慢),并可以给你Flash的无风格的内容

我认为这里的关键是你为什么要编写多个CSS样式表的两个原因。

You write multiple sheets because the different pages of your website require different CSS definitions. Or at least not all of them require all the CSS definitions one other pages require. So you split up the CSS files in order to optimize what sheets are load on the different pages and avoid loading too many CSS definitions. The second reason that comes to mind is that your CSS is getting that large that is becomes clumsy to handle and in order to make it easier to maintain the large CSS file you split them up into multiple CSS files.

第一个原因是附加的<link>标记将应用,因为这允许您为不同的页面加载不同的CSS文件集。

对于第二个原因,@import语句似乎是最方便的,因为您可以获得多个CSS文件,但加载的文件总是相同的。

从装载时间的角度来看并没有什么不同。浏览器必须检查和下载分离的CSS文件,无论它们是如何实现的。

从页面速度的角度来看,几乎不应该使用CSS文件中的@import,因为它会阻止样式表被并发下载。例如,如果样式表A包含以下文本:

@import url("stylesheetB.css");

然后,第二个样式表的下载可能要等到第一个样式表下载完成后才开始。另一方面,如果在主HTML页面的<link>元素中引用了这两个样式表,则可以同时下载这两个样式表。如果两个样式表总是一起加载,那么将它们合并到一个文件中也会很有帮助。

有时@import是合适的,但它们通常是例外,而不是规则。

几乎没有理由使用@import,因为它会分别加载每个导入的CSS文件,并会显著降低网站的速度。如果你对处理CSS的最佳方式感兴趣(当涉及到页面速度时),以下是你应该如何处理所有CSS代码:

打开所有CSS文件,复制每个文件的代码 将所有代码粘贴到页面HTML头中的单个STYLE标记之间 永远不要使用CSS @import或单独的CSS文件来交付CSS,除非你有大量的代码或有特定的需要。

更多详细信息请访问:http://www.giftofspeed.com/optimize-css-delivery/

上面的效果最好的原因是因为它为浏览器创建了更少的请求,它可以立即开始呈现CSS,而不是下载单独的文件。