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

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

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

文件的开头?

当前回答

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

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

colors.css :根{ ——bg-dark: # ffffff; ｝ home.css @ import“colors.css”; 身体:var(——bg-dark)

2021-05-05 08:52:18

其他回答

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

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

colors.css :根{ ——bg-dark: # ffffff; ｝ home.css @ import“colors.css”; 身体:var(——bg-dark)

2021-05-05 08:52:18

(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

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

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

更多详细信息请访问:http://www.giftofspeed.com/optimize-css-delivery/

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

2014-11-12 15:37:46

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

2013-10-31 14:09:45

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

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

推荐文章

最新文章

标签