13

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

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

.test{
    border: 1px solid red;
}

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

但是，如果第一条规则来自我无法编辑的父 CSS 文件（或者在我的情况下是 LESS 文件），因为它在其他地方使用，或者来自我不想破解的第 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 的附加组件）如果没有，我们知道为什么不吗？似乎节省了相当大的文件大小，对我来说没有任何不利之处。

免责声明我曾尝试搜索组合选择器、合并选择器和一些变体，如果我错过了此过程的常用术语，我很抱歉，因为收益似乎如此明显，我必须遗漏一些东西！

4

1 回答 1

18

为什么不能也不应该做

你说：

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

那当然是因为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 中的两个精确选择器字符串紧跟一个其他。任何其他情况都可能做出错误的决定。

于 2013-05-24T13:38:44.907 回答