Question

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

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

完成提取以及数组中的排序部分。所以我有一堆或数组结构如下

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

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

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

我需要做的是在数组的'style'部分重新混洗，以便将常见元素组合在一起。优化不是问题，因为此过程只会被调用一次然后被缓存。

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

最后的办法是创建完整的字符串，然后通过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/ 小心，她会伤害你的感情

将CSS规则降低到最低公分母

1 个答案: