将 CSS 规则减少到最小公分母

Question

我有一个 PHP 模板引擎，它允许您在渲染之前为对象设置样式属性。

在开发期间，我希望这些属性是内联的，这样我就可以轻松找到它们并更改它们。但是，对于生产，我想提取它们并将它们缓存在 css 文件中。我还想从模板中的任何 html 元素中提取内联样式。

提取以及数组中的排序部分已完成。因此，我有一堆或数组，其结构如下：

array(
    'tag'  =>'div',
    'id'   =>'myDiv',
    'class'=>array('container','wrapper'),
    'style'=>array('background'=>'#CCCCCC',/*rules...*/)
);

请注意，不一定在所有元素上设置“id”和“class”键，但始终设置两者中的至少一个。

将此数组呈现为 css 文件的部分也已完成。

我需要做的是围绕数组的“样式”部分重新洗牌，以便将常见元素分组在一起。优化不是问题，因为该进程只会被调用一次然后被缓存。

但我尝试设计一些伪代码，但我被困住了。我猜测这个过程的某些部分至少必须做出“尽可能聪明的猜测”，但即使如此我也看不清楚。

最后的办法是创建完整的字符串，然后通过 css-minifier 运行字符串本身，但据我所知，没有人这样做“减少到最低公分母”的事情。

有什么建议吗？

[编辑]

作为对评论的答复，这里有更多说明：

如果我的数组是这样呈现的：

array(
    array(
        'tag'  =>'div',
        'id'   =>'myDiv',
        'style'=>array('background'=>'#CCCCCC','font-size'=>'24px','color'=>'#FF0000')
    ),
    array(
        'tag'  =>'div',
        'class'=>array('container','hasBorder'),
        'style'=>array('background'=>'#CCCCCC','border'=>'1px solid black')
    ),
    array(
        'tag'  =>'div',
        'class'=>array('wrapper','hasBorder'),
        'style'=>array('color'=>'#FF0000','border'=>'1px solid black')
    )
);

我的 CSS 应该这样呈现：

#myDiv{font-size:24px;}
#myDiv, .container{background:#CCCCCC;}
#myDiv, .wrapper{color:#FF0000;}
.hasBorder{border:1px solid black}

输出可能会有所不同；我不关心定义如何设置规则的确切逻辑是什么；但我想避免的是我目前所拥有的：

#myDiv{background:#CCCCCC;font-size:24px;color:#FF0000;}
.container{background:#CCCCCC;border:1px solid black;}
.wrapper{color:#FF0000';border:1px solid black;}

这是一个简单的例子，但我有很多重复的规则，这些规则毫无意义；生成的 CSS 不仅臃肿，而且不易于维护。我想要的是生成一个设计人员可以使用的基本 CSS。

Answer 1

css lint http://csslint.net/
小心，她会伤害你的感情