基本上,我想知道使用@import将样式表导入到现有的样式表中,而不是仅仅添加另一个样式表的优势/目的是什么…
<link rel="stylesheet" type="text/css" href="" />
文件的开头?
基本上,我想知道使用@import将样式表导入到现有的样式表中,而不是仅仅添加另一个样式表的优势/目的是什么…
<link rel="stylesheet" type="text/css" href="" />
文件的开头?
当前回答
从页面速度的角度来看,几乎不应该使用CSS文件中的@import,因为它会阻止样式表被并发下载。例如,如果样式表A包含以下文本:
@import url("stylesheetB.css");
然后,第二个样式表的下载可能要等到第一个样式表下载完成后才开始。另一方面,如果在主HTML页面的<link>元素中引用了这两个样式表,则可以同时下载这两个样式表。如果两个样式表总是一起加载,那么将它们合并到一个文件中也会很有帮助。
有时@import是合适的,但它们通常是例外,而不是规则。
其他回答
它们非常相似。有些人可能认为@import更易于维护。但是,每个@import都将花费您一个新的HTTP请求,其方式与使用“link”方法相同。所以在速度的背景下,它并不更快。正如“duskwuff”所说,它不能同时加载,这是一个缺点。
有时你必须使用@import而不是内联。如果你正在开发一个复杂的应用程序,它有32个或更多的css文件,而且你必须支持IE9,那么你别无选择。IE9忽略前31个之后的任何css文件,这包括内联css。但是,每个表可以导入31个其他表。
我经历了一个可以添加链接样式表的“高峰”。虽然添加任何数量的链接Javascript对我的免费主机提供商来说都不是问题,但在外部样式表数量翻倍后,我就崩溃/变慢了。 正确的代码示例是:
@import 'stylesheetB.css';
所以,就像Nitram提到的那样,我发现在硬编码设计时,拥有一个好的心理地图是很有用的。 祝成功。 如果有语法错误的话,我原谅你。
从页面速度的角度来看,几乎不应该使用CSS文件中的@import,因为它会阻止样式表被并发下载。例如,如果样式表A包含以下文本:
@import url("stylesheetB.css");
然后,第二个样式表的下载可能要等到第一个样式表下载完成后才开始。另一方面,如果在主HTML页面的<link>元素中引用了这两个样式表,则可以同时下载这两个样式表。如果两个样式表总是一起加载,那么将它们合并到一个文件中也会很有帮助。
有时@import是合适的,但它们通常是例外,而不是规则。
(2022年更新:我应该指出的是,许多专业开发人员现在使用SASS这样的系统来管理他们的CSS,或者与React兼容的框架,其中任何一种都可以在内部处理这些优化。)
我要唱反调了,因为我讨厌人们意见太一致。
1. 如果您需要一个依赖于另一个样式表的样式表,请使用@import。在单独的步骤中进行优化。
任何时候都有两个变量需要优化——代码的性能和开发人员的性能。在许多情况下,如果不是大多数情况下,更重要的是使开发人员更有效率,只有这样才能使代码更性能。
如果有一个样式表依赖于另一个样式表,最合乎逻辑的做法是将它们放在两个单独的文件中,并使用@import。这对于下一个查看代码的人来说是最有逻辑意义的。
(When would such a dependency happen? It's pretty rare, in my opinion usually one stylesheet is enough. However, there are some logical places to put things in different CSS files:) Theming: If you have different color schemes or themes for the same page, they may share some, but not all components. Subcomponents: A contrived example - say you have a restaurant page that includes a menu. If the menu is very different from the rest of the page, it'll be easier to maintain if it's in its own file.
样式表通常是独立的,所以使用<link href>来包含它们是合理的。但是,如果它们是一个依赖的层次结构,那么您应该做最合乎逻辑的事情。
Python使用import;C用法包括;JavaScript有require。CSS有import功能;当你需要它的时候,使用它!
2. 一旦你达到了站点需要扩展的程度,连接所有的CSS。
任何类型的多个CSS请求——无论是通过链接还是通过@imports——对于高性能网站来说都是糟糕的做法。一旦你到了优化很重要的时候,你所有的CSS都应该通过一个minifier来流动。Cssmin组合import语句;正如@Brandon指出的那样,grunt也有多种选择。(另见此问题)。
一旦到了简化阶段,<link>更快,正如人们指出的那样,所以最多链接到一些样式表,尽可能不要@import任何样式表。
然而,在网站达到生产规模之前,代码的组织性和逻辑性比稍微快一点更重要。