基本上我想知道使用@import将样式表导入现有样式表而不是添加另一个样式表的优点/目的是什么......
<link rel="stylesheet" type="text/css" href="" />
到文件的负责人？
答案 0 :(得分：314)
从页面速度的角度来看，几乎不会使用CSS文件中的@import，因为它可以防止同时下载样式表。例如，如果样式表A包含文本：
@import url("stylesheetB.css");
然后在下载第一个样式表之前，可能无法开始下载第二个样式表。另一方面，如果两个样式表都在主HTML页面的<link>元素中引用，则两者都可以同时下载。如果两个样式表总是一起加载，那么简单地将它们组合到一个文件中也是有帮助的。
偶尔会出现@import合适的情况，但它们通常是例外，而不是规则。
答案 1 :(得分：167)
我将扮演魔鬼的拥护者，因为当人们同意太多时，我讨厌它。
在任何给定时间，您都需要优化两个变量 - 代码的性能以及开发人员的性能。在许多情况下，如果不是大多数情况，使开发人员更高效，并且只有使代码更高效才更重要。
如果你有一个依赖的样式表，那么最合乎逻辑的做法是将它们放在两个单独的文件中并使用@import。 这将使下一个查看代码的人具有最合乎逻辑的意义。
（这种依赖会在什么时候发生？在我看来，这种情况非常罕见 - 通常一个样式表就足够了。但是，有一些合理的地方可以把东西放在不同的CSS文件中：）
- 主题：如果您对同一页面有不同的配色方案或主题，它们可能会共享一些但不是所有组件。
- 子组件：一个人为的例子 - 假设您有一个包含菜单的餐馆页面。如果菜单与其他菜单非常不同 该页面，如果它在自己的文件中，它将更容易维护。
通常样式表是独立的，因此使用<link href>将它们全部包含在内是合理的。但是，如果它们是一个依赖的层次结构，那么你应该做一些最合乎逻辑的事情。
Python使用导入; C用途包括; JavaScript需要。 CSS有导入;当你需要它时，使用它！
任何类型的多个CSS请求 - 无论是通过链接还是通过@imports - are bad practice用于高性能网站。一旦你处于优化问题的地步，你所有的CSS都应该通过一个缩小器。 Cssmin结合了import语句;正如@Brandon指出的那样，grunt也有多种选择。 （See also this question）。
一旦你处于缩小阶段，<link>会更快，正如人们所指出的那样，所以最多链接到几个样式表，如果可能的话，不要@import。
在网站达到生产规模之前，代码组织和逻辑更重要，而不是稍快一点。
答案 2 :(得分：14)
出于速度原因，最好不要使用@import在页面中包含CSS。请参阅此优秀文章，了解原因：http://www.stevesouders.com/blog/2009/04/09/dont-use-import/
同样，通过@import标记缩小和组合css文件通常更难，因为minify脚本无法从其他css文件中“剥离”@import行。当您将它们包含为＆lt; link标记时，您可以使用现有的minify php / dotnet / java模块来进行缩小。
所以：使用<link />代替@import。
答案 3 :(得分：11)
使用链接方法，样式表是并行加载的（更快更好），几乎所有浏览器都支持链接
import逐个加载任何额外的css文件（更慢），并且可以为你提供Flash of Unstyled Content
答案 4 :(得分：8)
@NeboIznadMiš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);
答案 5 :(得分：7)
在头部添加css样式表与使用导入功能相比没有太大区别。使用@import通常用于链接样式表，以便可以轻松扩展。它可以用来轻松交换不同的颜色布局，例如结合一些通用的CSS定义。我想说主要优点/目的是可扩展性。
我同意xbonez评论，因为可移植性和可维护性是额外的好处。
答案 6 :(得分：3)
他们非常相似。有些人可能认为@import更易于维护。但是，每个@import都会以与使用“link”方法相同的方式向您收取新的HTTP请求。所以在速度的背景下它并不快。而正如“duskwuff”所说，它不会同时加载，这是一个垮台。
答案 7 :(得分：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标记是当今缓慢呈现的主要驱动因素。你平均谷歌新闻页面超过6兆的ECMAScript只是为了呈现一点点文字！ LOL
几千字节的缓存CSS和一致的干净HTML以及较小的javascript脚印将以闪电般的速度呈现在用户代理中，因为浏览器会缓存一致的DOM标记和CSS，除非您选择通过javascript马戏团进行操作和更改技巧。
答案 8 :(得分：3)
我使用@import的地方是我正在做两个版本的页面，英语和法语。我将使用main.css以英语构建我的页面。当我构建法语版本时，我将链接到法语样式表（main_fr.css）。在法语样式表的顶部，我将导入main.css，然后在法语版本中仅重新定义我需要的部分的特定规则。
答案 9 :(得分：3)
有时您必须使用@import而不是内联。如果您正在处理具有32个或更多css文件的复杂应用程序，并且您必须支持IE9，则别无选择。 IE9在第一个31之后忽略任何css文件，这包括和内联css。但是，每张工作表可以导入31个其他工作表。
答案 10 :(得分：3)
引自http://webdesign.about.com/od/beginningcss/f/css_import_link.htm
@import方法的主要目的是在页面上使用多个样式表，但只有一个链接在＆lt;头＆gt;。例如，公司可能为网站上的每个页面都有一个全局样式表，其中子部分具有仅适用于该子部分的其他样式。通过链接到子部分样式表并导入该样式表顶部的全局样式，您不必维护包含该站点和每个子部分的所有样式的巨大样式表。唯一的要求是任何@import规则都需要在其余的样式规则之前。请记住，继承仍然是一个问题。
答案 11 :(得分：2)
我认为关键在于你实际编写多个CSS样式表的两个原因。
由于第一个原因，将应用额外的<link>标记，因为这允许您为不同的页面加载不同的CSS文件集。
由于第二个原因，@import语句显示为最方便，因为您获得了多个CSS文件，但加载的文件始终相同。
从装载时间的角度来看，没有什么不同。浏览器必须检查并下载分离的CSS文件，无论它们如何实现。
答案 12 :(得分：2)
我认为@import在为多个设备编写代码时最有用。包含条件语句仅包含相关设备的样式，然后只加载一个工作表。您仍然可以使用链接标记添加任何常见的样式元素。
答案 13 :(得分：2)
如果您使用的是CSS RESET，请使用@import，例如Eric Meyer的Reset CSS v2.0，这样它就可以在应用CSS之前完成它，从而防止冲突。
答案 14 :(得分：0)
我经历了一个高峰＆＃34;您可以添加的链接样式表。虽然添加任意数量的链接Javascript对我的免费主机提供商来说不是问题，但在外部样式表数量增加一倍之后，我遇到了崩溃/减速。 正确的代码示例是：
@import 'stylesheetB.css';
所以，我觉得有一个好的心理地图很有用，正如Nitram所说的那样，同时仍然在对设计进行硬编码。 一帆风顺。 我原谅英语语法错误，如果有的话。
答案 15 :(得分：0)
现代浏览器可以使用 css 文件来定义全局变量。这个文件可以导入到其他可以使用变量的css文件中。
例如，要在整个站点中使用一致的颜色：
colors.css
:root {
--bg-dark: #ffffff;
}
home.css
@import "colors.css";
body: var(--bg-dark)
答案 16 :(得分：-2)
几乎没有理由使用@import，因为它会单独加载每个导入的CSS文件，并且会显着降低您的网站速度。如果您对处理CSS的最佳方式感兴趣（当涉及页面速度时），那么您应该如何处理所有您的CSS代码：
此处有更详细的信息：http://www.giftofspeed.com/optimize-css-delivery/
上述效果最好的原因是因为它创建的浏览器处理请求较少，并且可以立即开始渲染CSS而不是下载单独的文件。
答案 17 :(得分：-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>