CSS 预处理器还是 PHP？答案

【问题标题】：CSS Preprocessor or PHP?CSS 预处理器还是 PHP？
【发布时间】：2012-01-29 18:32:52
【问题描述】：

如果我使用 PHP 编写代码，是否有理由使用 CSS 预处理器而不是 PHP？例如，我可以通过在我的标题中使用 PHP 在我的 CSS 文件中：

<link rel="stylesheet" type="text/css" media="all" href="style.php" />

这样我就可以传递变量像style.php?color=#000

或者我可以使用 LESS 之类的东西来预处理我的 CSS。如果我使用 less.js，我不确定如何像前面的示例那样传递变量。

现在，我听说 PHP CSS 文件无法缓存，所以我知道为什么会出现问题，尤其是在 CSS 文件很大的情况下。但我希望能够将变量传递给我的 CSS 表。

谁能告诉我更多关于为什么我会使用一个而不是另一个，和/或如果我使用 less.js，我将如何将变量传递给我的 .less 文件？

【问题讨论】：

您可以使用LESS PHP 编译器，它允许处理CSS 字符串或整个文件。
我推荐 Stylus 而不是 LESS。您可以通过使用预处理器的“include-this-other-file”功能来“传递变量”，以包含一个设置“变量”的 PHP 文件，但这就像您所说的那样会破坏缓存。您可能希望通过 Javascript 设置“变量”以对 CSS 产生效果，而不是在 CSS 本身中设置。
PHP CSS 可以被缓存，您需要设置适当的标题和/或使用基于文件的缓存。

标签： php css performance less

【解决方案1】：

现在，我听说 PHP CSS 文件无法缓存，所以我明白为什么会有问题，尤其是在 CSS 文件很大的情况下。

PHP CSS 文件可以被缓存，但是如果你将动态值传递给它们，缓存点通常会丢失。如果您有一个可能随每个请求而变化的动态值，那么缓存将变得毫无意义。

此外，通过 PHP 预处理器推送大量静态 CSS 往往会浪费服务器资源。

更简单的方法通常是拥有静态 CSS 文件，并在页面正文中声明所有动态值：

<!-- the static style sheet declares all the static values --> 
<link rel="stylesheet" type="text/css" href="static.css"> 
<!-- now you override all the dynamic values -->
<style>
  .classname { color: <?php echo $color; ?> }
</style>

这样，您可以随心所欲地使用动态值，但您仍然可以避免 PHP 处理大量 CSS 数据。

【讨论】：

Pekka 对于超过一页的环境使用此方案不是一个好主意。您失去了 .css 的核心力量，即在整个网站上完全避免
@Ahmed Masud：如果每个页面的动态样式不同，那么这是最好的方法。网站不一定需要一个样式表来涵盖所有情况。
@Ahmed 向我展示了比这更好的动态 CSS 实现（注意这是关于可以在每个请求上更改的值）。这是<style> 条目非常好的一种情况
所有 GET 请求都可以被缓存，包括。 “变量”。
@Pekka：你在直接讨论其他事情，所以请不要误读我写的内容。我并没有说你应该膨胀不可缓存的部分，即使已经添加了查询参数，也可以缓存 GET 请求。也可以不添加额外的样式表，而是向body 元素添加另一个类，缓存的样式表会根据需要应用规则。

【解决方案2】：

可以缓存任何和所有 HTTP 请求，您只需生成适当的缓存标头see rfc2616。

有趣的是，缓存会很好地工作，因为如果您的 GET 值发生更改，那么您无论如何都不希望 PHP 被缓存。所以继续享受使用它们吧。

你的 css 的一部分应该是这样的：

<?php
     header("Content-type: text/css");
?>

这是一个非常有趣的教程：http://css-tricks.com/snippets/php/intelligent-php-cache-control/

【讨论】：

"...您不希望 PHP 无论如何被缓存" - 这正是为什么如果您的动态值可以按用户甚至每个页面更改，这不是一个好方法的原因。如果您有 10 次值更改，则用户的浏览器将强制加载样式表 10 次。

【解决方案3】：

除了浏览器缓存，静态文件更适合服务器端缓存：

静态 CSS 文件可以缓存到内存中（甚至可以使用 nginx 等服务器进行预压缩），这样您就可以从无 cookie 的静态服务域中为它们提供服务。使用像 nginx 这样的 Web 服务器可以大大提高性能，因为使用的 RAM 更少。如果您没有太多 RAM 或流量很大，则差异可能会很大。

如果你有一个小网站，那没关系。

【讨论】：