Question

TL; DR：通过管理员分配给前端的很多CSS覆盖。想知道是否有更好的方法来解决问题，而不是每次都对每一条规则进行排除。

假设您已经为自己的客户建立了一个Wordpress网站，一个善良举止和可怕品味的人称为约翰。 John可以访问他的管理面板并创建几个框，每个框都有不同的内容。这就是他网站前端的样子：

<div class="box" id="box_01">Lorem...</div>
<div class="box" id="box_02">ipsum...</div>
<div class="box" id="box_03">dolor...</div>
<div class="box" id="box_04">sit...</div>
<div class="box" id="box_05">amet...</div>

同时，在“style.css”中，我们找到了这个单一的规则：

div.box { background-color: #eee; color: #333 }

现在用户John对你的设计非常满意，但是想把他的一个盒子的背景设置为电蓝色，将文本颜色设置为黑色。由于他想要自治，因此您需要为客户提供管理界面，然后继续实施解决方案。完成管理区域后，现在剩下2个PHP变量：$ box_bg和$ box_color。您将如何以及在哪里取消之前在“style.css”中声明的CSS？

最直接的解决方案可能包括在页面的某处包含此代码：

<style>

div#box_02 {

    background-color: <php echo $box_bg; ?>;
    color:  <php echo $box_color; ?>;

}

</style>

但是更好的方法？

为了简单起见，此示例仅包含两个规则。想象一下，而不是2，有20个盒子，每个盒子必须设置盒子本身的背景，颜色，大小，位置属性以及它自己的后代。您最终会在HTML中使用大量的覆盖行。

这让我再次回答上述问题：是否有更好，更清洁的方式？我认为，用于LESS或SCSS的PHP编译器可能是一个很好的起点 - 让它运行一次（每次保存一个块/ post），然后依赖它的缓存输出。 3个流行的解决方案似乎是https://github.com/leafo/scssphp，https://github.com/oyejorge/less.php和https://github.com/leafo/lessphp - 虽然两个LESS编译器似乎已经停止使用，我想知道它是否真的是一个好的，实用的并且在一切安全之上，在现场网站上使用类似的东西。

你的方法是什么？你会做什么？

讨论CSS覆盖，预处理器和更好/更清洁的代码

0 个答案: