最好的方法包括CSS?为什么使用@import?

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

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

我认为这里的关键是你为什么要编写多个CSS样式表的两个原因。

1. 因为网站的不同页面需要不同的CSS定义，所以需要编写多个表。或者至少不是所有的页面都需要其他页面所需要的所有CSS定义。因此，为了优化在不同页面上加载的表，并避免加载太多的CSS定义，您将CSS文件进行了拆分。
2. 第二个原因是，你的CSS变得太大了，处理起来变得笨拙，为了更容易维护大的CSS文件，你把它们分成多个CSS文件。

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

第二个原因是@import语句似乎是最方便的，因为你得到了多个CSS文件，但加载的文件总是相同的。

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

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

@import url("stylesheetB.css");

然后，第二个样式表的下载可能要等到第一个样式表下载完成后才开始。另一方面，如果两个样式表都在主HTML页面的<link>元素中引用，则可以同时下载这两个样式表。如果两个样式表总是一起加载，那么将它们合并到一个文件中也会很有帮助。

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

出于速度考虑，最好不要使用@import在页面中包含CSS。看看这篇优秀的文章，了解为什么不http://www.stevesouders.com/blog/2009/04/09/dont-use-import/

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

所以:使用<link />代替@import。

使用link方法，样式表可以并行加载(更快更好)，而且几乎所有浏览器都支持link

import加载任何额外的css文件一个接一个(较慢)，并可以给你Flash的无风格的内容

它们非常相似。有些人可能认为@import更易于维护。但是，每个@import都将花费您一个新的HTTP请求，其方式与使用“link”方法相同。所以在速度的背景下，它并不更快。正如“duskwuff”所说，它不能同时加载，这是一个缺点。

@import 'stylesheetB.css';

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

@Nebo Iznad mio 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

如果你使用的是CSS RESET，比如Eric Meyer的RESET CSS v2.0，在你的CSS中使用@import，这样它就能在应用你的CSS之前完成它的工作，从而防止冲突。

(2022年更新:我应该指出的是，许多专业开发人员现在使用SASS这样的系统来管理他们的CSS，或者与React兼容的框架，其中任何一种都可以在内部处理这些优化。)

我要唱反调了，因为我讨厌人们意见太一致。

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

在任何给定的时间都有两个变量要优化-代码的性能和开发商业绩。在许多(如果不是大多数)情况下，使开发人员更有效率，只有这样才能使代码更高效更为重要。

如果你有一个样式表取决于在另一个上，最合乎逻辑的做法是把它们放在两个独立的文件中，并使用@import。这对于下一个查看代码的人来说是最有逻辑意义的。

(这种依赖什么时候会发生?在我看来，这是非常罕见的

• 通常一个样式表就足够了。然而，在不同的CSS文件中，有一些逻辑上的地方可以把东西放在不同的CSS文件中:)

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

子组件:一个人为的例子——假设你有一个包含菜单的餐厅页面。如果菜单和其他的很不一样 这个页面，如果它在自己的文件中，它会更容易维护

通常样式表是独立的，所以使用<link href>将它们全部包含是合理的。但是，如果它们是一个依赖的层次结构，那么您应该做最合乎逻辑的事情。

Python使用import;C用法包括;JavaScript有require。CSS有import功能;当你需要它的时候，使用它!

2. 一旦你达到了站点需要扩展的程度，连接所有的CSS。

任何类型的多个CSS请求-无论是通过链接还是通过@imports - 都是不好的做法用于高性能网站。一旦你到了优化很重要的时候，你所有的CSS都应该通过一个minifier来流动。Cssmin组合import语句;正如@Brandon指出的那样，grunt也有多种选择。(还有这个问题)。

一旦你在简化阶段，<link>更快，正如人们指出的，所以最多链接到一些样式表，如果可能的话不要@import任何样式表。

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

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

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

我认为@import在为多种设备编写代码时最有用。包含一个条件语句来只包含有问题的设备的样式，然后只加载一个表。您仍然可以使用link标记来添加任何公共样式元素。

几乎没有理由使用@import，因为它会分别加载每个导入的CSS文件，并会显著降低网站的速度。如果你对处理CSS的最佳方式感兴趣(当涉及到页面速度时)，这是你应该如何处理所有你的CSS代码:

• 打开所有CSS文件，复制每个文件的代码
• 将所有代码粘贴到页面HTML头中的单个STYLE标记之间
• 永远不要使用CSS @import或单独的CSS文件来交付CSS，除非你有大量的代码或有特定的需要。

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

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

有时你必须使用@import而不是内联。如果你正在开发一个复杂的应用程序，它有32个或更多的css文件，而且你必须支持IE9，那么你别无选择。IE9忽略前31个之后的任何css文件，这包括内联css。但是，每个表可以导入31个其他表。

这可能会帮助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>

是的，在你的网站中总是使用@import和外部级联样式表!

更新:8/22/2022

(在过去的10年里，网上有很多关于@import的使用的假信息，我打算纠正。所以请仔细阅读下面我的信息。)

第一条规则

不依赖第三方供应商的CSS解决方案!不要使用SASS、React、Modernizr、Bootstrap或Angular来管理CSS。我知道，我都用过了。总是使用手写的CSS文本文件自己管理级联样式表，你的网站不仅运行得更快，而且你将完全控制你的网站设计和用户体验。如果你依赖于这些设计糟糕的系统，它们将在许多场景下失败，降低你的网站速度，并在许多旧版本的浏览器中失败……太多了，数不清。

规则二

是的，总是使用@import !它作为使用CSS的现代解决方案非常棒。，我强烈推荐它!它已经在数百个浏览器中使用了20多年，没有任何问题。许多年轻的、缺乏经验的开发人员对@import有错误的假设，包括@import "block "在典型的页面请求期间下载网页脚本、HTML或其他资产。这些都是完全错误的。我将在下面证明它!

规则三

在CSS中使用@import会使不减慢页面加载或解析。嵌入在<style>元素中的多个@imports都在平行中相互下载。(即使是非常老的IE浏览器也是如此)。在从<link>外部样式表内部调用多个@import规则的情况下，这些规则也都是并行下载的，并使用与保存它们的父样式表相同的连接。它们只是不与父表和它可能包含的任何CSS并行下载。稍后再详细介绍。

规则四

CSS是否不需要被压缩，最小化，预处理等。而CSS下载大小，或者多个外部CSS文件使用@import是不在Web上的一个问题。大多数样式表的大小很少超过30kb。将此与典型JavaScript API库中的1-5兆字节进行比较，这是一个带宽占用者，您将了解为什么CSS下载不会延迟或减慢浏览器内容。一定要意识到这一点。这些微小的导入样式文本是一个典型网页下载的大得多的下载足迹的一个片段，当使用这些现代JavaScript库，表情符号，图像，视频和媒体文件时，在现代网页显示请求期间，典型用户的浏览器的块流会爆炸。这就是为什么你也应该不要压缩你的CSS或使用SASS预处理它，因为在下载时间或解析和呈现树显示上的节省几乎为零。

阻塞CSS不是问题，@import也不是bug或过时的技术。这是一个非常可靠的，较老的编码解决方案，已经工作了20多年。

但你可能仍然想知道@import如何真正帮助我?

让我们看一个例子。大多数开发人员导入外部样式表来划分他们想要在模块中管理的样式部分，或者隐藏在某些浏览器中。在下面的链接表中，所有导入的表都被添加到一个父样式表中，以便在一个位置管理它们。当浏览器在HTML下载期间解析链接的表时，将打开(或重用)一个连接，所有这些导入的表通过连接并行下载。因此，我们将添加父表来保存导入的外部CSS表，如下所示:

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

.．.然后在上面的parent.css表中，我们有以下@import子对象。它们都应该在大多数浏览器中并行下载，并共享相同的TCP连接。大多数现代网络浏览器都有6个或更多，这意味着CSS永远不会阻止HTML或其他页面的下载和解析。此外，2022年的许多服务器现在都支持包含多路复用的HTTP2，这意味着所有这些微小的CSS文件下载现在都可以与其他请求共享一个连接。这些小文本文件在现代浏览器中使用@import快速下载!

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

在下面的第二个例子中，这些嵌入在HTML <style>标记中的@import声明也应该同时下载，只是随机下载。同样，在许多较老的浏览器以及较新的浏览器中，这种方式都是有效的。根据我所读到的，他们可能会有这样使用@import的顺序问题，但在这种类型的设计中，你的CSS应该很少依赖于级联顺序。顺便说一下，有许多格式可以编写@import。在编写这种类型的媒体查询时，使用格式@import url('mycss.css');来提高现代HTML5浏览器可靠地解析导入文件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(我推荐这样做)，那么如果没有CSS来解析，@import将立即开始，并且应该使用与父文件相同的连接来下载文件。
3. 在上面的第一种情况中，<link>父样式表包含多个导入的表，如果父表在@imports声明之后也有额外的CSS，那么确实会出现真正的“阻塞”;CSS连接。在这种情况下，父CSS文件必须先下载，先完成它的CSS解析和下载，发现@imports，然后下载@import样式，并在文件完成之前将它们放在文件中的CSS之前。这在逻辑上是有意义的，以及为什么在任何CSS样式表中，永远不要将CSS与@import样式规则结合使用。我从不这样做。如果删除父文件中的CSS，导入会立即通过父文件连接调用它们的文件，不会延迟。
4. 如果你将没有导入规则的<link>样式表与带有@import的链接样式表或带有@import的嵌入式<style>组合在一起，则在Internet Explorer中，它们通常不会并行下载. c。其他浏览器可以很好地处理这个问题。如上所述，这可能与IE有限的浏览器连接有关。

因此，基于这些规则，在大多数情况下，@import工作正常. c。主要的问题是当将@import添加到有大量纯CSS的工作表中时。这种类型的事情是有意义的，并且会导致很长时间的延迟，因为父节点解析自己的CSS，然后发现额外的@imports。

请记住，现代浏览器大约有6个可用的连接，所以@import不会成为瓶颈，有太多的文件或太多的大文件加上非异步JavaScript将阻碍你的网页解析和渲染。顺便说一下，你现在下载的JavaScript API是1.5兆字节!

使用@import管理旧浏览器版本的CSS显示

使用@import也有很多好的理由!

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

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

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

.．.用这个CSS里面…

body {
font-size:13px;
}

现在，在您导入的自定义表(newerbrowser .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格式和'all'，它将在IE1-7浏览器中隐藏，以及更多!

@import 'imported.css' all;

.．.在@import…

html body {
font-size:1em;
}

使用“em"单位优于quot;px"单位，因为它允许字体和设计根据用户设置拉伸，而旧的浏览器更适合基于像素的(这是刚性的，不能在浏览器用户设置中更改)。大多数旧浏览器都无法看到导入的表。

我上面发布的@import表规则现在从下面列出的所有旧浏览器中隐藏起来，你现在可以单独设置样式或完全忽略它们，让你的团队现在可以为现代HTML5浏览器设计!

- Netscape 1-4.8
- Opera 1-3.5
- Windows Internet Explorer 1-7.x
- Macintosh Internet Explorer 2-4.5
- Konqueror 1-2.1
- Windows Amaya 1-5.1
- iCab 1-2
- OmniWeb
- Many more antiquated browsers...

你可能会说，“谁在乎旧的浏览器!”试着去一些更大的老式政府或公司网络，那里有成千上万的旧Windows PC或Mac电脑，你仍然会看到那些旧的浏览器在使用!但这真的只是好的设计，因为你今天喜欢的浏览器有一天也会过时。在有限的范围内使用CSS意味着你现在有一个更大且不断增长的用户代理群体，他们不能很好地与你的网站合作。

使用@import，你的跨浏览器网站兼容性现在将达到99.99%的浏览器显示饱和度，因为很多浏览器都能理解导入的表。您还可以使用上面的解决方案管理旧浏览器的CSS链接，并使用导入的CSS来管理所有更新的浏览器样式和布局。它保证您将基本的CSS应用于旧的代理，但更高级的CSS3+交付给新的代理。这使得旧的浏览器也可以访问内容，而不会影响到新桌面浏览器所需要的丰富的视觉显示，也不必为各种浏览器版本管理数百个复杂的CSS hack和修复。

还要记住，现代浏览器在第一次调用网站后会非常好地缓存HTML结构和CSS。这就是使用链接和导入的外部CSS的全部目的。一个调用，一个缓存!此外，对服务器的多次调用已经不再是曾经的瓶颈了。大量的Javascript API和JSON被上传到智能设备上，设计糟糕的HTML标记在页面之间不一致，这是今天呈现缓慢的主要原因。例如，在许多谷歌网站页面上执行viewsource，并下载所有兆字节的同步和异步JavaScript !您的谷歌新闻页面平均超过6兆字节的ECMAScript，只是为了呈现一小部分文本!糟糕! !

几千字节的缓存CSS和一致的干净HTML以及较小的Javascript占用将以闪电般的速度呈现在用户代理中，这仅仅是因为浏览器一次缓存外部文件、标记和CSS。不要使用巨大的Javascript杂技技巧来操纵和改变网站的自然解析流程。依靠您自己创建的小CSS文件，使用@import下载它们，您的站点每次都会完美显示。

顺便说一下，你可以在这里下载这个样式表系统:通用CSS框架

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

例如，要在站点中使用一致的颜色:

1. < p > colors.css

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

2. < p > home.css

   @import "colors.css";
   
   
   body: var(--bg-dark)