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

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

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

文件的开头?

当前回答

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

2012-04-05 22:54:07

其他回答

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

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

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

任何时候都有两个变量需要优化——代码的性能和开发人员的性能。在许多情况下，如果不是大多数情况下，更重要的是使开发人员更有效率，只有这样才能使代码更性能。

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

(When would such a dependency happen? It's pretty rare, in my opinion usually one stylesheet is enough. However, there are some logical places to put things in different CSS files:) Theming: If you have different color schemes or themes for the same page, they may share some, but not all components. Subcomponents: A contrived example - say you have a restaurant page that includes a menu. If the menu is very different from the rest of the page, it'll be easier to maintain if it's in its own file.

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

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

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

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

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

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

2014-04-19 21:28:22

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

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

2012-04-05 22:45:34

这可能会帮助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-29 22:18:58

@Nebo在伊兹纳德米索格古尔

下面是使用@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-31 14:12:42

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

You write multiple sheets because the different pages of your website require different CSS definitions. Or at least not all of them require all the CSS definitions one other pages require. So you split up the CSS files in order to optimize what sheets are load on the different pages and avoid loading too many CSS definitions. The second reason that comes to mind is that your CSS is getting that large that is becomes clumsy to handle and in order to make it easier to maintain the large CSS file you split them up into multiple CSS files.

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

对于第二个原因，@import语句似乎是最方便的，因为您可以获得多个CSS文件，但加载的文件总是相同的。

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

2012-04-05 22:47:03

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

推荐文章

最新文章

标签