拆分CSS是一个好习惯吗？

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这样的任务运行器.