Question

在网页的每个部分都有一个CSS文件是个好主意吗？例如，我可以有几个这样的文件，而不是一个大文件：head.css，container.css，main_menu.css，footer.css，form.css等等。它可以帮助我轻松管理设计，但它有任何缺点吗？

哪种方法最好包含所有这些文件？ CSS @import还是只使用PHP？我读到CSS导入可能会减慢进程，但是如果我使用PHP生成CSS链接怎么办？像这样：

<?php
    $css_dir = opendir("$site_root/includes/css/");

    if ($css_dir !== false)
    {
        $timestamp = time();

        while ( ($one_css = readdir($css_dir)) !== false )
        {
            if ((strpos($one_css, "~") === false) && ($one_css !== ".") && ($one_css !== "..") && ($one_css !== "index.php"))
            {
                echo "<link rel=stylesheet type=text/css href=\"$site_root/includes/css/$one_css?rand=$timestamp\" />\n";
            }
        }
    }

    closedir($css_dir);
?>

PHP方法的问题在于它为生成的HTML页面创建了一个巨大的头部分。这是件坏事吗？

提前致谢。

Answer 1

不确定这是最好的方法，但这是我通常遵循的。

保留不同的CSS文件会导致浏览器发送多个请求并增加页面加载时间。此外，如果您正在使用缓存，这种方法可能会导致问题。

您应该在项目中保留单独的CSS文件，但在部署时应将它们合并到一个或多个压缩的CSS文件中。为此，您可以使用像Grunt这样的任务运行器。

Answer 2

浏览器会获取每个文件，因此从技术上来说，要求获取每个文件。这可能会为每个文件请求添加大量不必要的/不需要的开销。

我看到你正在使用php，不太熟悉这些工具，但我知道至少Visual Studio允许你做一些叫做bundle的东西。您可以拥有几个易于管理的单独文件，并且在部署站点时，它会将它们全部捆绑到一个文件中，因此它只需一次获取。它也可以缩小＆＃39;它也意味着它将消除不需要的空白区域，使文件更大。你正在使用的东西可能有类似的东西，或者我确定你可以找到一些能为你做这件事的服务。

Answer 3

是和否

如果您正在开发，是的，您需要分离CSS文件，因为您可以非常轻松地修改代码。

如果您正在部署网站，不，导致多个文件浪费网络流量。

此外，您可以使用grunt.js，gulp.js和guard来简化和优雅。

Answer 4

我同意，出于开发目的，可能更容易拆分。但请记住，最终它也会造成混乱。通常，您需要在页面的多个部分使用相同的类，然后如果您在一个月后查看代码，则不知道您在何处放置该类并且必须搜索所有单独的CSS文件。 / p>

话虽如此，对于性能而言，最好有一个缩小的CSS文件。因此，即使您将CSS文件分开，我也会使用工具或PHP将所有文件放在一个文件中，然后再发布到生产环境中。然后，您的标题中只需要一个link标记。

另请注意，如果您的网站访问量有限，使用readdir就可以了。如果您的网站增长，它也会对性能产生影响，以便在每个用户的每个页面请求中读取它。

所以最后：如果需要，可以使用单独的文件，但在发布到生产之前对它们进行分组。

拆分CSS是一个好习惯吗？

4 个答案: