基本上,我想知道使用@import将样式表导入到现有的样式表中,而不是仅仅添加另一个样式表的优势/目的是什么…
<link rel="stylesheet" type="text/css" href="" />
文件的开头?
基本上,我想知道使用@import将样式表导入到现有的样式表中,而不是仅仅添加另一个样式表的优势/目的是什么…
<link rel="stylesheet" type="text/css" href="" />
文件的开头?
当前回答
出于速度考虑,最好不要使用@import在页面中包含CSS。看看这篇优秀的文章,了解为什么不去:http://www.stevesouders.com/blog/2009/04/09/dont-use-import/
此外,通过@import标记来缩小和合并css文件通常更困难,因为缩小脚本不能从其他css文件中“剥离”@import行。当你将它们包含为<link标签时,你可以使用现有的minify php/dotnet/java模块来进行缩小。
所以:使用<link />代替@import。
其他回答
引自http://webdesign.about.com/od/beginningcss/f/css_import_link.htm
The main purpose of @import method is to use multiple style sheets on a page, but only one link in your < head >. For example, a corporation might have a global style sheet for every page on the site, with sub-sections having additional styles that only apply to that sub-section. By linking to the sub-section style sheet and importing the global styles at the top of that style sheet, you don't have to maintain a gigantic style sheet with all the styles for the site and every sub-section. The only requirement is that any @import rules need to come before the rest of your style rules. And remember that inheritance can still be a problem.
@Nebo在伊兹纳德米索格古尔
下面是使用@import的正确方法
@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import 'custom.css';
@import url("chrome://communicator/skin/");
@import "common.css" screen, projection;
@import url('landscape.css') screen and (orientation:landscape);
来源:https://developer.mozilla.org/en-US/docs/Web/CSS/@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任何样式表。
然而,在网站达到生产规模之前,代码的组织性和逻辑性比稍微快一点更重要。
我使用@import的一个地方是当我处理一个页面的两个版本时,英语和法语。我将使用main.css用英文构建我的页面。在构建法语版本时,我将链接到一个法语样式表(main_fr.css)。在法语样式表的顶部,我将导入main.css,然后为法语版本中需要不同的部分重新定义特定的规则。
几乎没有理由使用@import,因为它会分别加载每个导入的CSS文件,并会显著降低网站的速度。如果你对处理CSS的最佳方式感兴趣(当涉及到页面速度时),以下是你应该如何处理所有CSS代码:
打开所有CSS文件,复制每个文件的代码 将所有代码粘贴到页面HTML头中的单个STYLE标记之间 永远不要使用CSS @import或单独的CSS文件来交付CSS,除非你有大量的代码或有特定的需要。
更多详细信息请访问:http://www.giftofspeed.com/optimize-css-delivery/
上面的效果最好的原因是因为它为浏览器创建了更少的请求,它可以立即开始呈现CSS,而不是下载单独的文件。