我一直在阅读有关动态样式表的内容,并且偶然发现了几个选项,包括 sass 和 less。但我的问题是为什么不把我的stylesheet.css
变成stylesheet.css.php
并简单地使用 php 变量。然后,我避免了与所有这些其他方法相关的所有依赖问题。
我这样做是否忽略了一些严重的问题?
有代码重用的论点:在编写 PHP 代码来生成 CSS 时,您实际上是在复制(一些)背后的逻辑,例如 sass 和 less。当有一个广泛使用、经过测试和完整的替代方案可用时,你为什么要这样做?
另一件事是性能。标准 CSS 文件由您的 Web 服务器提供,并带有关于浏览器缓存的合理标头。您的浏览器不会每次都下载相同的 CSS 文件,它只是从浏览器端的缓冲区中获取它。默认情况下,PHP 根本不被缓存(您通常不希望它被缓存)。这意味着,默认情况下,您的 PHP 生成的 CSS 不会被缓存,从而在您的服务器上产生额外的负载并为您的客户端带来额外的等待时间。虽然其中一些可以解决(包括生成 CSS 的 PHP 代码中的合理标头输出),但其中一些无法解决(例如,Web 服务器启动 PHP 的开销)。
我这样做是否忽略了一些严重的问题?
我在 CDN 上托管所有静态资产,您也应该这样做。CDN 不做 PHP。
另外:缓存、运行时性能、缩小
在 CSS 中使用 PHP 变量有很多优点,其中之一是您不必学习新的语法。在 CSS 代码中使用 PHP 变量是一种已知做法,已经在许多框架、主题和其他网站相关脚本中实现。
最常见的用途是内联 CSS。下面是一个使用 PHP 变量的内联 CSS 示例:
<html>
<head>
<style>
.class {
color: <?php echo $text_color; ?>
}
</style>
</head>
<body>
</body>
</html>
当 PHP 变量表示通过管理界面设置的用户设置时,通常使用此技术。一个实际的例子是在 WordPress 主题中,用户可以通过主题的后端设置背景或文本颜色。
当涉及到外部 CSS 文件时,也可以使用 PHP 变量,但为了避免 PHP 在每次检索 CSS 文件时对其进行解析,您必须将输出保存到静态文件,如stylesheet-processed.css
.
SASS 和 LESS 都需要在保存到 " .css
" 文件之前进行解析。您的 PHP 文件也是如此,您将执行该文件并将输出保存到静态“ .css
”文件,就像其他语法一样。
解析 CSS 文件是一种非常常见的做法,并且在许多网站和大多数知名网站上广泛使用。通常通过缩小(节省约 25%)CSS 代码、将多个文件合并为一个(减少 HTTP 请求)和 gzip(节省约 80%)生成的文件来提高站点的性能。
这是一个示例,说明如何在名为 的文件中使用 PHP 变量stylesheet.php
,并将结果保存到stylesheet.css
:
<?php
// Get the parsed CSS code with the
$processed_CSS = file_get_contents('http://www.example.com/stylesheet.php')
// Save the processed CSS to a static CSS file
file_put_contents('stylesheet.css', $processed_CSS);
将上述 PHP 代码放入名为“ parse-css.php
”的文件中,并通过 Web 浏览器访问它,以创建或更新生成的静态 CSS 文件。
然后在您的 HTML 代码中,您将包含stylesheet.css
而不是stylesheet.php
.
您可以改进您的解析器以使其也缩小 CSS 代码,例如使用CSSMin PHP 类。