包括CSS的最佳方法？为什么要使用@import？

288

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

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

到文件头？

html  css 
— 社区
source
14
可移植性是我想到的第一个。如果要包括一组在各个页面的CSS文件，它更简单，更易于维护必须只有一个CSS文件中的每个页面链接，而不是5
— xbonez
1
@xbonez：但是，在大多数情况下，还会涉及大量其他常见的HTML，因此通常最好在模板中链接两个样式表。
— duskwuff -inactive
6
回到过去的糟糕时期，@ import可以方便地同时支持“好的”浏览器（Netscape 4，IE5）和不好的浏览器（IE3，N3）。如今，它几乎已无用。
— mddw 2012年
1
— chharvey 2015年
4
<链路>是一个空元素在HTML5，所以..你可以使用它没有斜线，等，<link rel="stylesheet" type="text/css" href="theme.css">。
— КонстантинВан

Answers:

333

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

@import url("stylesheetB.css");

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

有时在某些情况下@import适当，但通常是例外，而不是规则。

— 黄昏-无效-
source
46
There are occasionally situations where @import is appropriate喜欢@media用来将不同的样式应用于不同的设备。
— 德里克·朕会功夫2012年
50
另一个原因是@import在样式表（例如@import url(http://fonts.googleapis.com/css?family=Archivo+Narrow);）中添加一个Google字体，这样您就不必link使用该样式表将其粘贴到每个页面中。
— cayhorstmann
28
对于那些好奇的人：我最喜欢的用途之一@import是当您使用诸如的设置来建立构建过程时grunt-concat-css。在开发过程中，@import语句正常工作，页面加载速度无关紧要。然后，在为生产而构建时，类似这样的工具将适当地连接所有CSS文件并删除@import。我使用来对我的JavaScript文件执行类似的操作grunt-browserify。
— 布兰登
3
@Derek朕会功夫如果您@import要应用设备特定的样式，为什么不只使用<link>带有媒体属性的标签呢？
— Jomar Sevillejo
1
@MuhammedAsif没有理由@import会更快。您可能正在查看某种测量工件。
— duskwuff -inactive
185

我将扮演恶魔的拥护者，因为当人们一致同意时我会讨厌它。

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

您随时可以针对两个变量进行优化-代码性能和开发人员性能。在大多数情况下（即使不是大多数情况），使开发人员更高效，然后使代码更高效，这一点更为重要。

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

（何时会发生这种依赖关系？在我看来，这种情况很少见-通常一个样式表就足够了。但是，有一些逻辑上的地方可以将它们放置在不同的CSS文件中：）

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

通常，样式表是独立的，因此使用将它们全部包括在内是合理的<link href>。但是，如果它们是从属层次结构，则应该执行最合乎逻辑的事情。

Python使用import; C用途包括；JavaScript有要求。CSS已导入；在需要时使用它！

2.到达需要扩展站点的位置时，连接所有CSS。

对于高性能网站，任何形式的多个CSS请求（无论是通过链接还是通过@imports）都是不好的做法。一旦您到达了最重要的优化点，所有CSS都应该流过一个压缩器。Cssmin合并导入语句；正如@Brandon指出的那样，grunt也有多种选择。（另请参阅此问题）。

<link>正如人们所指出的那样，一旦进入最小化阶段，速度就会更快，因此最多只能链接到一些样式表，并且尽可能不要@import任何样式表。

不过，在站点达到生产规模之前，组织代码和逻辑性要比加快代码执行速度更为重要。

— 克里斯
source
37
+1时扮演“坏蛋”，这实际上会为更广泛地理解这个问题做出贡献。
— harogaston 2014年
“无论是通过链接还是通过@imports进行任何形式的多次CSS请求，对于高性能网站都是不好的做法。” 由于多路复用，在使用HTTP / 2时，这不是一个坏习惯。
— gummiost
13

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

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

因此：使用<link />代替@import。

— 科恩·彼得斯
source
1
例如，如果您使用grunt，还可以通过使用Combine来利用@import的优势。然后嵌入导入的样式表，使其成为一体。对我来说，这是两全其美。
— bjorsig
11

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

import会一对一（较慢）加载任何额外的css文件，并可能使您浏览未样式化的内容

— 莫格里
source
8

@Nebo IznadMišoGrgur

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

— 巴吉
source
7

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

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

— 特拉维斯J
source
3

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

— 克里斯·霍伦贝克
source
3

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

— 巴吉
source
3

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

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

— Vishnuraj V
source
3

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

— 卡尔
source
3

使用@import的理由很多。

使用@import的一个重要原因是进行跨浏览器设计。通常，已导入的工作表在许多较旧的浏览器中都是隐藏的，这使您可以将特定格式应用于非常古老的浏览器，例如Netscape 4或更旧的系列，适用于Mac的Internet Explorer 5.2，适用于Opera 6或更旧的版本以及适用于PC的IE 3和4。

为此，在base.css文件中，您可以具有以下内容：

@import 'newerbrowsers.css';

body {
  font-size:13px;
}

在导入的自定义工作表（newerbrowsers.css）中，只需应用较新的级联样式即可：

html body {
  font-size:1em;
}

使用“ em”单位优于“ px”单位，因为它可以根据用户设置扩展字体和设计，而随着旧版浏览器使用基于像素的效果更好（刚性且不能在浏览器用户设置中更改） 。大多数较旧的浏览器将看不到导入的工作表。

您可能会这样，谁在乎！尝试使用一些过时的大型政府或公司系统，您仍然会看到那些使用较旧的浏览器。但是它确实是一个很好的设计，因为您今天喜欢的浏览器也有一天会过时和过时。而且以有限的方式使用CSS意味着您现在有越来越多的用户代理，它们与您的网站无法很好地配合工作。

现在，使用@import可以使跨浏览器的网站兼容性达到99.9％的饱和度，这仅仅是因为许多旧版浏览器无法读取导入的工作表。它可以保证您为其html应用基本的简单字体集，但较新的代理会使用更高级的CSS。这使得较旧的代理可以访问内容，而不会损害较新的桌面浏览器所需的丰富视觉显示。

请记住，现代浏览器在首次访问网站后就非常好地缓存HTML结构和CSS。多次调用服务器已不再是瓶颈。

上百万字节的Javascript API和JSON已上传到智能设备，以及设计得不好的HTML标记（页面之间不一致）是当今缓慢渲染的主要驱动力。您的平均Google新闻页面的ECMAScript大小超过6 MB，仅用于呈现少量文本！大声笑

几千字节的缓存CSS和具有较小javascript足迹的一致的干净HTML将以闪电般的速度呈现在用户代理中，这仅仅是因为浏览器同时缓存了一致的DOM标记和CSS，除非您选择通过javascript马戏团技巧来进行操纵和更改。

— 斯托克利
source
2

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

  1. 您编写多张工作表是因为网站的不同页面需要不同的CSS定义。或者至少不是全部它们都需要另一页需要的所有CSS定义。因此，请拆分CSS文件，以优化在不同页面上加载的工作表，并避免加载太多CSS定义。
  2. 想到的第二个原因是您的CSS太大了，变得难以处理，并且为了更轻松地维护大型CSS文件，您将它们拆分为多个CSS文件。

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

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

从加载时间的角度来看，没有什么不同。无论如何实现，浏览器都必须检查并下载单独的CSS文件。

— 尼特拉姆
source
1
您说：“从加载时间的角度来看，没有什么不同。无论如何实现，浏览器都必须检查并下载单独的CSS文件。” 这是不正确的。浏览器可以并行下载多个<link> CSS文件，但是对于@ import CSS文件，必须先下载，解析它们，然后再下载@ import文件。这会降低您的页面加载速度，特别是如果导入的CSS文件具有自己的@导入文件
— cyberspy 2015年
2

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

— 用户名
source
2

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

— 伊森
source
0

我经历了可以添加的链接样式表的“高峰”。对于我的免费主机提供程序而言，尽管添加任意数量的链接Javascript并不是问题，但在将外部样式表数量加倍之后，我却崩溃了。正确的代码示例是：

@import 'stylesheetB.css';

因此，如Nitram所述，我发现它对于保持良好的思维图很有用，同时仍在对设计进行硬编码。上帝的速度。如果有任何英语语法错误，我可以原谅。

— 镁葡萄糖
source
-2

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

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

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

上面的方法效果最好的原因是，它为浏览器创建的请求更少，并且可以立即开始呈现CSS，而无需下载单独的文件。

— 威廉·德雷斯克
source
1
对“优化”一词的看法极为狭窄，但有效。为了保持理智，请在发布阶段使用一种工具来实现这种优化。在此之前，请尽一切可能帮助您更快地思考和编码。
— 杰西·奇斯霍尔姆
7
由于大多数网站都有一页以上，并且每个网站通常使用相同的CSS，所以使用CSS文件（链接到标题中）会不会更快？这将导致它被传输一次，然后用于浏览器缓存（通常在内存中），而不是将其作为每个页面html的一部分下载整个页面。
— 莱戈拉斯2015年
4
复制所有CSS文件并将其粘贴到STYLE中是一种灾难。.最好至少包含1个CSS到<HEAD>
— T.Todua 2015年
6
这完全忽略了浏览器缓存
— Michiel 2015年
3
我假设这个答案是个玩笑？（免费的粗体，并且链接的页面上说不要使用样式标签）
— Sanjay Manohar
-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>
— 亚当·约瑟夫·洛兹
source
1
我认为，手动“缩小” CSS内容，然后循环浏览选定的样式表并将其全部添加到每个页面会更好。也file_get_contents()比使用cURL慢得多。
— 康纳·辛普森
1
这是一个坏主意，它会阻止浏览器缓存被利用。
— 重整了
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.