Html 包含 CSS 的最佳方式？为什么要使用@import？

Best way to include CSS? Why use @import?

提问by duskwuff -inactive-

Basically I am wondering what is the advantage / purpose of using @importto import stylesheets into an existing stylesheet versus just adding another ...

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

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

to the head of the document?

到文件的头部？

回答by duskwuff -inactive-

From a page speed standpoint, @importfrom a CSS file should almost never be used, as it can prevent stylesheets from being downloaded concurrently. For instance, if stylesheet A contains the text:

从页面速度的角度来看，@import几乎不应该使用 CSS 文件，因为它可以防止同时下载样式表。例如，如果样式表 A 包含文本：

@import url("stylesheetB.css");

then the download of the second stylesheet may not start until the first stylesheet has been downloaded. If, on the other hand, both stylesheets are referenced in <link>elements in the main HTML page, both can be downloaded at the same time. If both stylesheets are always loaded together, it can also be helpful to simply combine them into a single file.

那么在下载第一个样式表之前，可能不会开始下载第二个样式表。另一方面，如果<link>主 HTML 页面的元素中引用了两个样式表，则可以同时下载这两个样式表。如果两个样式表总是一起加载，将它们简单地组合成一个文件也很有帮助。

There are occasionally situations where @importis appropriate, but they are generally the exception, not the rule.

偶尔@import有合适的情况，但它们通常是例外，而不是规则。

回答by Chris

I'm going to play devil's advocate, because I hate it when people agree too much.

我要扮演魔鬼的拥护者，因为我讨厌人们太同意它。

1. If you need a stylesheet that depends on another one, use @import. Do the optimization in a separate step.

1. 如果你需要一个依赖于另一个的样式表，使用@import。在单独的步骤中进行优化。

There are two variables you're optimizing for at any given time - the performance of your code, and the performance of the developer. In many, if not a majority of cases, it's more important to make the developer more efficient, and only then make the code more performant.

在任何给定时间，您都需要针对两个变量进行优化 - 代码的性能和开发人员的性能。在许多情况下（如果不是大多数情况），让开发人员更有效率更重要，只有这样才能使代码更高效。

If you have one stylesheet that dependson another, the most logical thing to do is to put them in two separate files and use @import. That will make the most logical sense to the next person who looks at the code.

如果您有一个样式表依赖于另一个，最合乎逻辑的做法是将它们放在两个单独的文件中并使用 @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.

（这种依赖什么时候会发生？在我看来，这非常罕见——通常一个样式表就足够了。但是，有一些合乎逻辑的地方可以将东西放在不同的 CSS 文件中:)

• 主题：如果同一页面有不同的配色方案或主题，它们可能会共享一些组件，但不是所有组件。
• 子组件：一个人为的示例 - 假设您有一个包含菜单的餐厅页面。如果菜单与页面的其余部分非常不同，如果它在自己的文件中会更容易维护。

Usually stylesheets are independent, so it's reasonable to include them all using <link href>. However, if they are a dependent hierarchy, you should do the thing that makes the most logical sense to do.

通常样式表是独立的，因此使用<link href>. 但是，如果它们是依赖层次结构，您应该做最合乎逻辑的事情。

Python uses import; C uses include; JavaScript has require. CSS has import; when you need it, use it!

Python 使用导入；C 用途包括；JavaScript 有要求。CSS 有导入；当你需要它时，使用它！

2. Once you get to the point where the site needs to scale, concatenate all the CSS.

2. 一旦达到站点需要缩放的程度，连接所有 CSS。

Multiple CSS requests of anykind - whether through links or through @imports - are bad practicefor high performance web sites. Once you're at the point where optimization matters, all your CSS should be flowing through a minifier. Cssmincombines import statements; as @Brandon points out, grunt has multiple options for doing so as well. (See also this question).

任何类型的多个 CSS 请求——无论是通过链接还是通过 @imports——对于高性能网站来说都是不好的做法。一旦你到了优化很重要的地步，你所有的 CSS 都应该流经一个 minifier。cssmin结合import语句；正如@Brandon 指出的那样，grunt 也有多种选择。（另见这个问题）。

Once you're at the minified stage, <link>is faster, as people have pointed out, so at most link to a few stylesheets and don't @import any if at all possible.

一旦您处于缩小阶段，<link>就会更快，正如人们所指出的那样，因此最多链接到一些样式表，并且尽可能不要@import。

Before the site reaches production scale though, it's more important that the code is organized and logical, than that it goes slightly faster.

但是，在站点达到生产规模之前，代码的组织性和逻辑性比运行速度稍快更重要。

回答by Koen Peters

It is best to NOT use @importto include CSS in a page for speed reasons. See this excellent article to learn why not: http://www.stevesouders.com/blog/2009/04/09/dont-use-import/

@import出于速度原因，最好不要在页面中包含 CSS。请参阅这篇出色的文章以了解原因：http: //www.stevesouders.com/blog/2009/04/09/dont-use-import/

Also it is often harder to minify and combine css files that are served via the @import tag, because minify scripts cannot "peel out" the @import lines from other css files. When you include them as <link tags you can use existing minify php/dotnet/java modules to do the minification.

此外，缩小和合并通过 @import 标签提供的 css 文件通常更难，因为 minify 脚本无法从其他 css 文件中“剥离”@import 行。当您将它们包含为 <link 标签时，您可以使用现有的 minify php/dotnet/java 模块进行缩小。

So: use <link />instead of @import.

所以：使用<link />代替@import.

回答by mowgli

using the link method, the stylesheets are loaded parallel (faster and better), and nearly all browsers support link

使用链接方法，样式表是并行加载的（更快更好），并且几乎所有浏览器都支持链接

import loads any extra css files one-by-one (slower), and could give you Flash Of Unstyled Content

import 一个一个地加载任何额外的 css 文件（较慢），并且可以为您提供 Flash Of Unstyled Content

回答by BBagi

@Nebo Iznad Mi?o Grgur

@Nebo Iznad Mi?o Grgur

The following are all correct ways to use @import

以下都是@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);

source: https://developer.mozilla.org/en-US/docs/Web/CSS/@import

来源：https: //developer.mozilla.org/en-US/docs/Web/CSS/@import

回答by Travis J

There is not really much difference in adding a css stylesheet in the head versus using the import functionality. Using @importis generally used for chaining stylesheets so that one can be easily extended. It could be used to easily swap different color layouts for example in conjunction with some general css definitions. I would say the main advantage / purpose is extensibility.

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

I agree with xbonez comment as well in that portability and maintainability are added benefits.

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

回答by Kris Hollenbeck

They are very similar. Some may argue that @import is more maintainable. However, each @import will cost you a new HTTP request in the same fashion as using the "link" method. So in the context of speed it is no faster. And as "duskwuff" said, it doesn't load simultaneously which is a downfall.

它们非常相似。有些人可能会争辩说 @import 更易于维护。但是，每个@import 都会以与使用“链接”方法相同的方式花费您一个新的 HTTP 请求。因此，在速度方面，它并没有更快。正如“duskwuff”所说，它不会同时加载，这是一个垮台。

回答by Vishnuraj V

Quoted from http://webdesign.about.com/od/beginningcss/f/css_import_link.htm

引自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.

@import 方法的主要目的是在一个页面上使用多个样式表，但在你的 <head> 中只使用一个链接。例如，公司可能为站点上的每个页面都有一个全局样式表，子部分具有仅适用于该子部分的附加样式。通过链接到子部分样式表并在该样式表顶部导入全局样式，您不必维护包含站点和每个子部分的所有样式的巨大样式表。唯一的要求是任何 @import 规则都需要在您的其余样式规则之前出现。请记住，继承仍然是一个问题。

回答by Carl

Sometimes you have to use @import as opposed to inline . If you are working on a complex application that has 32 or more css files and you must support IE9 there is no choice. IE9 ignores any css file after the first 31 and this includes and inline css. However, each sheet can import 31 others.

有时您必须使用 @import 而不是 inline 。如果您正在处理具有 32 个或更多 css 文件的复杂应用程序，并且您必须支持 IE9，则别无选择。IE9 忽略第一个 31 之后的任何 css 文件，这包括和内联 css。但是，每个工作表可以导入 31 个其他工作表。

回答by BBagi

One place where I use @import is when I'm doing two versions of a page, English and French. I'll build out my page in English, using a main.css. When I build out the French version, I'll link to a French stylesheet (main_fr.css). At the top of the French stylesheet, I'll import the main.css, and then redefine specific rules for just the parts I need different in the French version.

我使用@import 的一个地方是当我在做一个页面的两个版本时，英语和法语。我将使用 main.css 用英语构建我的页面。当我构建法语版本时，我将链接到法语样式表 (main_fr.css)。在法语样式表的顶部，我将导入 main.css，然后为我需要的法语版本中不同的部分重新定义特定规则。