最好的方式来包括CSS？ 为什么使用@import？
基本上我想知道使用@import将样式表导入现有的样式表相对于添加另一个样式表的好处/目的是什么？
<link rel="stylesheet" type="text/css" href="" />
到文档的头部？
从页面速度的angular度来看，几乎不会使用CSS文件中的@import ，因为它可以防止同时下载样式表。 例如，如果样式表A包含文本：
@import url("stylesheetB.css");
那么在下载第一个样式表之前，第二个样式表的下载可能不会启动。 另一方面，如果两个样式表都在主HTML页面的<link>元素中引用，则两者都可以同时下载。 如果两个样式表总是一起加载，那么简单地将它们组合成一个文件也是有帮助的。
有时候@import是合适的，但通常是例外，而不是规则。
我会扮演魔鬼的拥护者，因为当人们同意的时候我讨厌它。
1.如果你需要一个依赖另一个的样式表，使用@import。 做一个单独的步骤优化。
您在任何时候都会优化两个variables – 代码的性能和开发人员的性能 。 在很多情况下，如果不是大多数情况下， 让开发人员更有效率，更重要的是让代码更高效 。
如果有一个样式表依赖于另一个样式表，最合理的做法是将它们放在两个单独的文件中并使用@import。 这对下一个查看代码的人来说是最合乎逻辑的。
（什么时候会出现这样的依赖关系？在我看来，这是非常罕见的 – 通常只有一个样式表就足够了。但是，有一些逻辑的地方可以把东西放在不同的CSS文件中:)
- 主题：如果您对同一页面有不同的配色scheme或主题，他们可能会共享一些组件，但不是全部组件。
- 子组件：一个人为的例子 – 比如说你有一个包含菜单的餐厅页面。 如果菜单与页面的其他部分截然不同，那么如果菜单位于其自己的文件中，将会更容易维护。
通常样式表是独立的，所以使用<link href>包含它们是合理的。 但是，如果他们是一个依赖层次结构，你应该做最合乎逻辑的事情。
Python使用导入; C使用包括; JavaScript有要求。 CSS有导入; 当你需要的时候，使用它！
2.一旦你到达了网站需要扩展的地步，连接所有的CSS。
任何types的多重CSS请求 – 无论是通过链接还是通过@imports – 对于高性能网站都是不好的做法 。 一旦你处于优化问题的关键点，所有的CSS都应该stream经一个缩小器。 Cssmin结合import报表; 正如@Brandon指出的那样，grunt也有多种select。 （ 也见这个问题 ）。
一旦你处于缩小阶段，正如人们已经指出的那样， <link>速度更快，所以最多只能链接几个样式表，并且尽可能不input。
但是，在网站达到生产规模之前，代码的组织性和逻辑性比代码更快一些更重要。
出于速度原因，最好不要使用@import在页面中包含CSS。 看到这个优秀的文章，了解为什么不： http : //www.stevesouders.com/blog/2009/04/09/dont-use-import/
另外，通过@import标签来缩小和合并css文件通常比较困难，因为minify脚本不能从其他css文件中“剥离”@import行。 当你把它们包含为<链接标签时，你可以使用现有的minify php / dotnet / java模块来进行缩小。
所以：使用<link />而不是@import 。
使用链接方法，样式表加载并行（更快，更好），几乎所有的浏览器都支持链接
导入加载任何额外的CSS文件一个接一个（较慢），并可以给你Flash的无风格的内容
@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
头部添加css样式表与使用导入function没有多大区别。 使用@import通常用于链接样式表，以便可以轻松扩展。 它可以用来轻松地交换不同的颜色布局，例如结合一些通用的CSS定义。 我想说的主要优点/目的是可扩展性。
我同意xbonez的评论，以及可移植性和可维护性是额外的好处。
他们非常相似。 有人可能会认为@import更易于维护。 但是，每个@import都会像使用“链接”方法一样使用新的HTTP请求。 所以在速度方面不会更快。 正如“黄昏”所说，它不会同时加载，这是一个垮台。
我使用@import的一个地方是我正在做两个版本的页面，英文和法文。 我将使用main.css构build我的英文页面。 当我构build法语版本时，我将链接到一个法语样式表（main_fr.css）。 在法语样式表的顶部，我将导入main.css，然后为法语版本中我需要的不同部分重新定义特定的规则。
引自http://webdesign.about.com/od/beginningcss/f/css_import_link.htm
@import方法的主要目的是在页面上使用多个样式表，但在<head>中只有一个链接。 例如，一家公司可能会在网站上为每个页面设置一个全局样式表，其中子部分具有仅适用于该子部分的其他样式。 通过链接到子部分样式表并导入该样式表顶部的全局样式，您不必为网站和每个子部分维护一个包含所有样式的巨大样式表。 唯一的要求是任何@import规则都需要在其他样式规则之前出现。 请记住，inheritance仍然是一个问题。
有时你必须使用@import而不是inline。 如果你正在一个复杂的应用程序，有32个或更多的CSS文件，你必须支持IE9没有select。 IE9忽略任何CSS文件之后的第一个31，这包括和内联的CSS。 但是，每张表可以导入31个其他表格。
有许多好理由使用@import。
使用@import的一个强有力的理由是进行跨浏览器devise。 一般来说，导入的工作表对于许多较旧的浏览器是隐藏的，这允许您针对Netscape 4或更早的系列，Mac版的Internet Explorer 5.2，Opera 6以及IE 3和4等适用于PC的非常旧的浏览器应用特定的格式。
要做到这一点，在你的base.css文件，你可以有以下几点：
@import 'newerbrowsers.css'; body { font-size:13px; }
在导入的自定义工作表（newerbrowsers.css）中，只需应用较新的级联风格：
html body { font-size:1em; }
使用“em”单位优于“px”单位，因为它允许字体和devise根据用户设置进行伸展，旧版浏览器在基于像素的情况下效果更好（这是僵化的，不能在浏览器用户设置中更改） 。 导入的工作表将不会被大多数旧版浏览器看到。
你可能如此，谁在乎！ 尝试去一些更大的陈旧的政府或企业系统，你仍然会看到使用旧的浏览器。 但是它的devise真的很好，因为你今天喜欢的浏览器也有一天会陈旧过时。 而以有限的方式使用CSS意味着你现在有一个更大，越来越多的用户代理不能很好地与你的网站。
使用@import跨浏览器的网站兼容性现在会达到99.9％的饱和度，因为许多旧的浏览器不会读取导入的表格。 它保证你为他们的HTML应用一个简单的基本字体，但更新的代理使用更高级的CSS。 这使得旧版代理可以访问内容，而不会影响新版桌面浏览器所需的丰富的可视化显示。
请记住，现代浏览器在首次调用Web站点后，会非常好地cachingHTML结构和CSS。 多次调用服务器并不是曾经的瓶颈。
兆字节和兆字节的JavaScript API和JSON上传到智能设备和devise不佳的HTML标记之间页面不一致是当前缓慢渲染的主要驱动因素。 你的平均谷歌新闻页超过6兆字节的ECMAScript只是为了渲染一点文字！ 大声笑
几千KB的cachingCSS和一致的干净的HTML与较小的JavaScript脚印将以闪电般的速度呈现在用户代理中，只是因为浏览器caching一致的DOM标记和CSS，除非您select通过JavaScript马戏技巧操纵和更改。
我认为这里的关键是你为什么写了多个CSS样式表的两个原因。
- 你写多个表，因为你的网站的不同页面需要不同的CSS定义。 或者至less不是所有的人都需要其他页面需要的所有CSS定义。 所以你分裂了CSS文件，以便优化在不同页面上加载的页面，并避免加载太多的CSS定义。
- 第二个想到的原因是，你的CSS变得越来越笨重，为了更容易维护这个大的CSS文件，把它们分成多个CSS文件。
第一个原因是额外的<link>标记将被应用，因为这允许你为不同的页面加载不同的CSS文件集合。
第二个原因是@import语句是最方便的，因为你得到了多个CSS文件，但是加载的文件总是一样的。
从加载时间的angular度来看，没有什么不同。 浏览器必须检查和下载独立的CSS文件，不pipe它们是如何实现的。
如果你正在使用CSS RESET，像Eric Meyer的Reset CSS v2.0一样，在你的CSS中使用@import，所以它在应用你的CSS之前就完成了工作，从而避免了冲突。
我认为在为多个设备编写代码时，@import是最有用的。 包括一个条件语句只包含有问题的设备的样式，然后只加载一个工作表。 您仍然可以使用链接标签添加任何常见的样式元素。
我经历了一个可以添加的链接样式表的“高峰”。 虽然添加任何数量的链接的Javascript对我的免费主机提供商来说不是问题，但在外部样式表数量增加了一倍之后，我得到了崩溃/减速。 而正确的代码示例是：
@import 'stylesheetB.css';
所以，我觉得像Nitram所说的那样，有一个好的思维导图是有用的，同时仍然在对devise进行硬编码。 一帆风顺。 如果有的话，我赦免英文的语法错误。
几乎没有理由使用@import，因为它会单独加载每个导入的CSS文件，并且会显着降低网站的速度。 如果你对处理CSS的最佳方式感兴趣（当谈到页面速度时），这就是你应该如何处理所有的CSS代码：
- 打开所有的CSS文件并复制每个文件的代码
- 将所有代码粘贴到页面的HTML标题中的单个STYLE标记之间
- 切勿使用CSS @import或单独的CSS文件来传递CSS，除非您有大量的代码或有特定的需求。
更详细的信息在这里： http : //www.giftofspeed.com/optimize-css-delivery/
上述原因最好的原因是因为它创build较less的浏览器处理请求，它可以立即开始呈现CSS而不是下载单独的文件。
这可能会帮助PHP开发人员。 下面的函数将删除空白，删除注释，并连接所有的CSS文件。 然后在页面加载之前将其插入头部的<style>标签。
下面的函数将去除注释并缩小传入的CSS。 它与下一个function配合使用。
<?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() 。 将样式表的名称与其pathIE： css/styles.css数组css/styles.css 。 您不需要添加扩展名.css因为它会自动添加到上面的函数中。
<head> <title></title> <?php $stylesheets = array( "bootstrap/css/bootstrap.min", "css/owl-carousel.min", "css/style" ); concatenateCSS( $stylesheets ); ?> </head>
