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

Question

一个基本的 CSS 示例。我遇到的每个浏览器都会呈现带有边距和填充以及红色边框的元素

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

.test{
    border: 1px solid red;
}

当然，如果我手动编写此 CSS，我会用红色替换黑色，并且只有一个规则。

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

现在，由于我正在使用服务器端 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 的附加组件)如果不是，我们知道为什么吗？似乎节省了相当大的文件大小，对我来说没有任何缺点。

免责声明 我已经尝试搜索组合选择器、合并选择器和一些变体，如果我错过了这个过程的通用术语，我深表歉意，似乎很可能因为 yield 看起来如此明显我必须缺少一些东西!

Answer 1

为什么不能也不应该这样做

你声明:

Every browser I have come across will render the item with the margin & padding and a red border.

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

上面的代码如果正常输出应该呈现一个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 级联之间的交互逻辑是不可能预测合并什么或如何合并的except in a case CSS 中的两个精确选择器字符串紧接着。任何其他情况都可能做出错误的决定。