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

Question

一个基本的CSS示例.我遇到的每个浏览器都会使用边距和填充以及红色边框渲染项目

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

.test{
    border: 1px solid red;
}

当然,如果我手工编写这个CSS,我会用红色替换黑色,只有一个规则.

但是,如果第一个规则来自父CSS文件(或者在我的情况下是LESS文件),我无法编辑,因为它在其他地方使用,或来自我不想破解的第三方库,那么我看到别无选择,只能添加额外的规则.

现在因为我使用服务器端LESS - > CSS编译缩小,对我来说似乎完全合理的是压缩器/缩小器应该将规则减少到仅仅

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

但是我所尝试过的一切都遵守了这两条规则; 一些压缩器/缩小器甚至可以删除换行符

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

它删除了一个换行符,但留下了一个完全不必要的规则声明.这对我来说似乎很奇怪.

有什么系统可以做到这一点吗？(最好是node.js的附加组件)如果没有,我们知道为什么不呢？看起来像一个相当大的文件大小保存,没有任何缺点.

免责声明我试图寻找组合选择器,合并选择器和少数变体,如果我错过了这个程序的常用术语,请道歉,似乎很可能因为增益看起来很明显我不得不遗漏一些东西!

Answer 1

为什么它不能也不应该完成

你说:

我遇到的每个浏览器都会使用边距和填充以及红色边框渲染项目.

那是因为,当然,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;
}

如果正常输出,上面的代码应该red像开发人员想要的那样通过级联呈现边框.现在假设LESS或其他预处理器根据您的需要进行缩小.它最终会像这样:

理论最小化

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

.test2 {
    border: 1px solid blue;
}

实际上会变blue得不那样red!这是因为两者.test1合并了,现在.test2是级联顺序中的最后一个而不是.test1最后一个的第二个实例.因此,预处理器必须足够"智能"才能找出理论上无限数量的可能级联组合,并且不知道html编码最终会影响决策(就像这里,html双类与级联顺序是决定最终渲染的原因.

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

这个例子应该说明为什么这样的最小化不能也不应该这样做 - 可能的html形式和CSS级联之间的交互逻辑是不可能预测什么或如何合并除了在一个案例中CSS 中的两个确切的选择器字符串紧接着一个另一个.任何其他案件都可能做出错误的决定.