312

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

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

到文件的头部？

4

18 回答 18

355

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

@import url("stylesheetB.css");

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

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

于 2012-04-05T22:47:12.090 回答
206

（2022 更新：我应该注意到，许多专业开发人员现在使用 SASS 之类的系统或与 React 兼容的框架来管理他们的 CSS，其中任何一个都可以在内部处理这些优化。）

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

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

在任何给定时间，您都在优化两个变量——代码的性能和开发人员的性能。在很多情况下，如果不是大多数情况下，更重要的是让开发人员更有效率，然后才能让代码更高效。

如果您有一个样式表依赖于另一个样式表，最合乎逻辑的做法是将它们放在两个单独的文件中并使用@import。对于下一个查看代码的人来说，这将是最合乎逻辑的。

（这种依赖什么时候会发生？在我看来，这非常罕见

  • 通常一个样式表就足够了。但是，有一些合乎逻辑的地方可以将东西放在不同的 CSS 文件中：）

  • 主题：如果同一页面有不同的配色方案或主题，它们可能会共享一些组件，但不是所有组件。

  • 子组件：一个人为的示例 - 假设您有一个包含菜单的餐厅页面。如果菜单与页面的其余部分有很大不同，则将其保存在自己的文件中会更容易维护。

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

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

2. 一旦你到达网站需要扩展的地步，连接所有的 CSS。

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

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

不过，在网站达到生产规模之前，更重要的是代码的组织性和逻辑性，而不是速度稍微快一点。

于 2014-04-19T21:28:22.347 回答
14

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

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

所以：使用<link />而不是@import.

于 2012-04-05T22:50:50.967 回答
13

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

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

于 2012-04-05T22:51:11.367 回答
10

@Nebo Iznad Mišo Grgur

以下都是使用@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

于 2013-10-31T14:12:42.643 回答
8

@import作为使用 CSS 的现代解决方案，效果很好。我强烈推荐它！许多年轻、缺乏经验的开发人员的假设存在错误@import，使得反对它的“阻塞”论点完全错误。

首先，多个@imports组合在一个嵌入<style>元素或一个<link>标签内的多个都相互并行下载。（即使对于旧的 IE 浏览器也是如此）。在标签和父 CSS 表中有多个@import规则的情况下<link>，这些也都并行下载并使用与父样式表相同的连接。他们只是不与父表和它可能包含的任何 CSS 并行下载。

因此，下面这个链接表中的@import 表都相互并行下载。所以如果我们有这个父表：

<link media="screen" rel="stylesheet" type="text/css" href="parent.css" />

...然后在上面的parent.css表中，我们有以下@import子级，它们都应该在大多数浏览器中并行下载并共享相同的 TCP 连接：

@import url('child1.css');
@import url('child2.css');
@import url('child3.css');
@import url('child4.css');

@import在下面的第二个示例中，嵌入在 HTML标记中的这些声明<style>也应该彼此并行下载，只是随机的。同样，这在许多较旧的浏览器和较新的浏览器中都以这种方式工作。根据我的阅读，他们可能会遇到这样的顺序问题@import，但是在这种类型的设计中，您的 CSS 应该很少依赖于级联顺序。

<style>
  @import url('child1.css');
  @import url('child2.css');
  @import url('child3.css');
  @import url('child4.css');
</style>

唯一@import有问题的是以下有限的场景：

  1. 您主要使用的是 IE 版本 4-9，它在历史上具有有限的连接（例如，IE6 与服务器的连接只有 2 个）。使用这些浏览器@import，各种链接的 CSS 组合无法并行下载。这也会影响<link>CSS 下载，所以这并不是反对@import.
  2. 在上面的第一种情况下，<link>父样式表包含导入的表单，因为父表单必须首先连接并解析其 CSS 文件，所以它向服务器添加了一个额外的连接。这是合乎逻辑的，应该是可以预料的。如果您的工作表只有导入而没有 CSS（我建议），没有用于解析 @import 的 CSS 会立即开始，并且应该使用与父级相同的连接来下载文件。
  3. 在上面的第一种情况下，<link>父样式表包含多个导入的表，如果父表在 @imports 声明之后还有额外的 CSS，那么是的，会有一个真正的“阻塞”CSS 连接。在那种情况下，必须先下载父 CSS 文件，首先完成其 CSS 解析和下载，发现 @imports，然后下载 @import 样式并将它们放在文件中的 CSS 之前，然后文件完成。这在逻辑上是有道理的，为什么你不应该在任何 CSS 样式表中将CSS 与样式规则结合起来@import。我从来没有这样做。如果您删除父文件中的 CSS，导入将立即通过父文件连接调用其文件，而不会延迟。
  4. 如果您将<link>没有导入规则的样式表与带有@import或嵌入的链接样式表组合<style>在一起@import，则仅在 Internet Explorer 中，它们通常不会并行下载。其他浏览器管理得很好。如前所述，这可能与 IE 的有限浏览器连接有关。

因此，根据这些规则，在大多数情况下，@import 可以正常工作。主要问题是在将 @import 添加到具有大量纯 CSS 的工作表中时。这种类型的事情是有道理的，并且会导致很长的延迟，因为父级解析自己的 CSS 然后发现额外的@imports.

请记住，现代浏览器大约有 6 个可用连接，因此@import不会成为瓶颈，文件过多或 LARGE 文件过多加上非异步 JavaScript 会阻碍网页中的解析和呈现。顺便说一句，您现在典型的 JavaScript API 下载是 1.5 兆字节！

更新

还有很多使用@import 的好理由！

使用@import 的一个重要原因是进行跨浏览器设计。通常，导入的工作表对许多较旧的浏览器是隐藏的，这使您可以为非常旧的浏览器应用特定格式，例如 Netscape 4 或更早系列、Mac 的 Internet Explorer 5.2、Opera 6 和更早的版本以及 PC 的 IE 3 和 4。 ...然后使用@import添加这些浏览器看不到的现代样式表，因为许多旧浏览器无法识别某些版本的@import.

例如，添加一个所有新旧浏览器都可以看到的普通样式表：

<link media="screen" rel="stylesheet" type="text/css" href="styles.css" />

......里面有这个CSS......

body {
  font-size:13px;
}

现在，在您导入的自定义工作表 (newerbrowsers.css) 中，只需应用较新的样式来覆盖上述样式，仅适用于较新的浏览器。较新的浏览器使用“em”单位，较旧的浏览器使用“px”。很多旧浏览器都看不到下面的这个版本@import，包括 IE 1-7、MAC IE 5、Netscape 4 和许多其他浏览器：

<link media="screen" rel="stylesheet" type="text/css" href="newerbrowsers.css" />

...只有较新的浏览器才能看到这个@import。将此@import 格式与“全部”一起使用，它将在 IE1-7 浏览器中隐藏，等等！

@import 'imported.css' all;

...在 @import 中使用这个 CSS ...

html body {
  font-size:1em;
}

使用“em”单位优于“px”单位，因为它允许字体和设计根据用户设置进行拉伸，而旧版浏览器使用基于像素的效果更好（这是刚性的，无法在浏览器用户设置中更改） . 大多数旧浏览器看不到导入的工作表。

你可以这样，谁在乎！尝试去一些更大的过时的政府或公司系统，你仍然会看到那些旧的浏览器被使用。但它真的只是很好的设计，因为你今天喜欢的浏览器有一天也会过时和过时。并且以有限的方式使用 CSS 意味着您现在拥有一个更大且不断增长的用户代理组，这些用户代理不能与您的网站很好地配合使用。

使用@import，您的跨浏览器网站兼容性现在将达到 99.9% 饱和度，这仅仅是因为许多旧浏览器不会读取导入的表格。它保证您为他们的 html 应用基本的简单字体集，但较新的代理使用更高级的 CSS。这允许较旧的代理访问内容，而不会影响较新的桌面浏览器所需的丰富视觉显示。请记住，现代浏览器在第一次调用网站后会非常好地缓存 HTML 结构和 CSS。对服务器的多次调用不再是曾经的瓶颈。

上传到智能设备的数兆字节和数兆字节的 Javascript API 和 JSON 以及设计不佳且页面之间不一致的 HTML 标记是当今呈现缓慢的主要驱动力。您的平均 Google 新闻页面超过 6 兆字节的 ECMAScript 只是为了呈现一点点文本！LOL 几千字节的缓存 CSS 和一致的干净 HTML 以及较小的 javascript 足迹将在用户代理中以闪电般的速度呈现，这仅仅是因为浏览器缓存了一致的 DOM 标记和 CSS，除非您选择通过 javascript 马戏团技巧来操作和更改它。

于 2017-07-18T00:07:20.103 回答
7

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

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

于 2012-04-05T22:45:34.973 回答
3

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

于 2012-04-05T22:54:07.843 回答
3

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

于 2013-10-31T14:09:45.927 回答
3

引自http://webdesign.about.com/od/beginningcss/f/css_import_link.htm

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

于 2014-04-19T22:05:34.400 回答
3

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

于 2015-08-04T22:55:39.293 回答
2

我认为这其中的关键是您实际上要编写多个 CSS 样式表的两个原因。

  1. 您编写多张工作表是因为您网站的不同页面需要不同的 CSS 定义。或者至少不是所有这些都需要其他页面需要的所有 CSS 定义。因此，您拆分 CSS 文件以优化在不同页面上加载的工作表并避免加载过多的 CSS 定义。
  2. 想到的第二个原因是您的 CSS 变得如此庞大以至于处理起来变得笨拙，为了更容易维护大型 CSS 文件，您将它们拆分为多个 CSS 文件。

对于第一个原因，附加<link>标签将适用，因为这允许您为不同的页面加载不同的 CSS 文件集。

由于第二个原因，该@import语句看起来最方便，因为您获得了多个 CSS 文件，但加载的文件总是相同的。

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

于 2012-04-05T22:47:03.370 回答
2

如果您使用 CSS RESET，请在您的 CSS 中使用 @import，例如 Eric Meyer 的 Reset CSS v2.0，因此它在应用您的 CSS 之前就完成了它的工作，从而防止了冲突。

于 2013-12-17T17:34:15.043 回答
2

我认为@import 在为多个设备编写代码时最有用。包含一个条件语句以仅包含相关设备的样式，然后仅加载一张工作表。您仍然可以使用链接标签添加任何常见的样式元素。

于 2014-09-27T17:27:59.073 回答
0

我经历了您可以添加的链接样式表的“高峰”。虽然添加任意数量的链接 Javascript 对我的免费主机提供商来说不是问题，但在将外部样式表数量增加一倍后，我遇到了崩溃/减速。正确的代码示例是：

@import 'stylesheetB.css';

因此，正如 Nitram 所提到的，我发现它对于拥有良好的思维导图很有用，同时仍在对设计进行硬编码。神速。我原谅英语语法错误，如果有的话。

于 2013-09-10T22:46:47.970 回答
0

现代浏览器可以使用 css 文件来定义全局变量。该文件可以导入到其他可以使用变量的 css 文件中。

例如，要在整个站点中使用一致的颜色：

  1. 颜色.css

    :root {
   --bg-dark: #ffffff;
}

  2. 主页.css

    @import "colors.css";

body: var(--bg-dark)
于 2021-05-05T08:52:18.680 回答
-2

几乎没有理由使用@import，因为它会单独加载每个导入的 CSS 文件，并且会显着降低您的网站速度。如果您对处理 CSS 的最佳方式（涉及页面速度）感兴趣，那么您应该使用以下方式处理所有CSS 代码：

  • 打开所有 CSS 文件并复制每个文件的代码
  • 将所有代码粘贴在页面 HTML 标头中的单个 STYLE 标记之间
  • 除非您有大量代码或有特殊需要，否则切勿使用 CSS @import 或单独的 CSS 文件来交付 CSS。

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

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

于 2014-11-12T15:37:46.400 回答
-2

这可能会帮助 PHP 开发人员。下面的函数将删除所有 CSS 文件的空白、删除注释和连接。然后在页面加载之前将其插入<style>头部的标签中。

下面的函数将删除注释并缩小传入的 css。它与下一个功能一起配对。

<?php
function minifyCSS($string)
{
    // Minify CSS and strip comments

    # Strips Comments
    $string = preg_replace('!/\*.*?\*/!s','', $string);
    $string = preg_replace('/\n\s*\n/',"\n", $string);

    # Minifies
    $string = preg_replace('/[\n\r \t]/',' ', $string);
    $string = preg_replace('/ +/',' ', $string);
    $string = preg_replace('/ ?([,:;{}]) ?/','$1',$string);

    # Remove semicolon
    $string = preg_replace('/;}/','}',$string);

    # Return Minified CSS
    return $string;
}
?>

您将在文档的头部调用此函数。

<?php
function concatenateCSS($cssFiles)
{
    // Load all relevant css files

    # concatenate all relevant css files
    $css = '';
    foreach ($cssFiles as $cssFile)
    {
        $css = $css . file_get_contents("$cssFile.css");
    }

    # minify all css
    $css = minifyCSS($css);
    echo "<style>$css</style>";
}
?>

concatenateCSS()在您的文档头中包含该功能。传入一个数组，其中包含样式表的名称及其路径 IE: css/styles.css。您不需要添加扩展名.css，因为它是在上面的函数中自动添加的。

<head>
    <title></title>
    <?php
    $stylesheets = array(
        "bootstrap/css/bootstrap.min", 
        "css/owl-carousel.min", 
        "css/style"
        );
    concatenateCSS( $stylesheets );
    ?>
</head>
于 2016-03-29T22:18:58.737 回答