为什么简单地将PHP变量用于动态样式表


Why simply use PHP variables for dynamic stylesheets?

我一直在阅读有关动态样式表的文章,偶然发现了几个选项,包括sass和更少的选项。但我的问题是,为什么不把我的stylesheet.css变成stylesheet.css.php,并简单地使用php变量。然后,我避免了与所有其他方法相关的所有依赖性问题。

我这样做是不是忽略了一些严重的问题?

有一个关于代码重用的论点:当编写PHP代码来生成CSS时,您实际上是在复制(一些)诸如sass和less之类的东西背后的逻辑。当有一种广泛使用、经过测试且完整的替代品可用时,你为什么要这么做?

另一件事是性能。标准CSS文件由您的web服务器提供,并带有关于浏览器缓存的合理标头。你的浏览器不会每次都下载相同的CSS文件,它只是从浏览器端的缓冲区中获取。默认情况下,PHP根本不缓存(而且您通常不希望缓存)。这意味着,默认情况下,您的PHP生成的CSS不会被缓存,从而导致服务器上的额外负载和客户端的额外等待时间。虽然其中一些问题可以解决(包括生成CSS的PHP代码中的sane头输出),但其中一些问题却无法解决(例如,web服务器启动PHP的开销)。

我这样做是不是忽略了一些严重的问题?

我在CDN上托管所有静态资产,您也应该这样做。CDN不使用PHP。

此外:缓存、运行时性能、缩小

内联CSS代码中使用的PHP变量

在CSS中使用PHP变量有很多优点,其中之一是您不必学习新的语法。在CSS代码中使用PHP变量是一种已知的做法,已经在许多框架、主题和其他与网站相关的脚本中实现。

最常用的是内联CSS。下面是一个内联CSS使用PHP变量的例子:

<html>
<head>
    <style>
    .class {
        color: <?php echo $text_color; ?>
    }
    </style>
</head>
<body>
</body>
</html>

当PHP变量通过管理界面表示用户设置集时,通常会使用此技术。一个实际的例子是在WordPress主题中,用户可以通过主题的后端设置背景或文本颜色。

外部CSS文件中的PHP变量

当涉及到外部CSS文件时,也可以使用PHP变量,但为了避免PHP在每次检索CSS文件时解析它,您必须将输出保存到像stylesheet-processed.css这样的静态文件中。

SASS和LESS在保存到".css"文件之前都需要进行解析。PHP文件也是如此,您将执行该文件并将输出保存到一个静态的".css"文件中,就像其他语法一样。

解析CSS文件是一种非常常见的做法,在许多网站和大多数知名网站上都被广泛使用。通常通过缩小(保存约25%)CSS代码、将多个文件合并为一个(减少HTTP请求)以及gzip(保存约80%)生成的文件来提高网站的性能。

下面是一个示例,说明如何在名为stylesheet.php的文件中使用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类。