自动将CSS选择器与预处理器组合/合并

.test{
    margin: 4px;
    border: 1px solid black;
    padding: 4px;
}

.test{
    border: 1px solid red;
}

.test{
    margin: 4px;
    border: 1px solid red;
    padding: 4px;
}

.test{margin:4px;border:1px solid black;padding:4px}.test{Border:1px solid reD}

为什么不能而不应该完成

你说：

那是因为,当然是cascading nature of CSS.它的设计是为了明确的目的而超越的.这就是为什么(以及如何)在你的CSS中添加一个额外的规则来覆盖这一点.

有一个原因

现在,我可以在一个预处理器中看到你的观点,或者将“合并”代码与同一个选择器进行最小化.但是,(1)例子显示(在这种情况下,最小化将是可行的),两个类实际上将按照CSS代码中的另一个实际跟随一个很少的(如果有的话).通常情况下,CSS将会影响级联在渲染中的发挥.这导致(2),它将需要比最初明显(或甚至可能)实现更多的逻辑.考虑这个例子：

HTML

<div class="test1 test2"></div>

CSS(框架文件)

.test1 {
    margin: 4px;
    border: 1px solid black;
    padding: 4px;
}

.test2 {
    border: 1px solid blue;
}

CSS(开发文件)

.test1 {
    border: 1px solid red;
}

上面的代码如果正常输出,应该像开发者想要的那样呈现级联的红色边框.现在假设LESS或另一个预处理器根据需要减少它.它可能最终如此：

理论最小化

.test1 {
    margin: 4px;
    border: 1px solid red;
    padding: 4px;
}

.test2 {
    border: 1px solid blue;
}

而且实际上会变成蓝色,不如红色！这是因为两个.test1合并,现在使.test2的最后一个级联顺序,而不是.test1的第二个实例为last.因此,预处理器必须“聪明”才能找出理论上无限数量的可能的级联组合,而不知道最终影响决策的html编码是什么(就像这里,html双重类与级联顺序是决定最终渲染的方式.

如果预处理器合并到第二个实例中,那不能解决问题,就像开发人员在.test1的第二个实例之后放置了.test2的第二个实例,但是没有定义不同的边框颜色呢？ .test2边框颜色仍然会通过与以下.test2合并来覆盖.

这个例子应该显示为什么这样的最小化不能也不应该完成 – 可能的HTML格式和CSS级联之间的交互逻辑是不可能预测什么或如何合并,除了一个情况下,CSS中的两个确切的选择符字符串紧随其后另一个.任何其他情况都可能作出错误的决定.