使用预处理器自动合并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的附加组件）如果没有，我们知道为什么吗？在我看来，这似乎是一个非常大的文件大小节省，并且没有任何缺点。

免责声明：我已经尝试搜索并合并选择器以及其他几种变体，如果我错过了这个过程的常见术语，我很抱歉，因为收益似乎如此明显，我必须遗漏了什么！

- CodeMonkey

---

我不知道有任何程序可以做到这一点，而且我认为没有人关心这种最小化。 - furas

有人不关心是因为他们不这样写CSS？还是只是乐意保留重复的内容？但他们足够在规则之间删除换行符，这是非常高度优化的。 - CodeMonkey

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;
}

上述代码如果正常输出，应该通过级联而呈现为红色边框，就像开发者想要的那样。现在假设LESS或其他预处理器按您的要求进行了缩小，它可能会变成这样： 理论缩小

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

.test2 {
    border: 1px solid blue;
}

实际上，它的呈现效果会是blue而不是red！这是因为两个.test1合并了，使得.test2成为级联顺序中的最后一个，而不是第二个.test1实例成为最后一个。因此，预处理器必须要“聪明”到能够找出理论上无限数量的可能级联组合，而且不知道影响决策的html编码是什么（就像在这里，html双重类与级联顺序一起决定了最终呈现效果）。

如果预处理器合并到第二个实例中，那也解决不了问题，因为如果开发人员在第二个.test1实例之后放置了第二个.test2实例，但没有定义不同的边框颜色，那么.test2边框颜色仍将被合并的以下.test2覆盖。

这幅插图应该说明为什么不能和不应该进行这样的最小化——可能的html表单和CSS级联之间的交互逻辑是不可预测的，除非在CSS中两个完全相同的选择器字符串紧随其后。任何其他情况都可能做出错误的决定。

- ScottS