.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添加)如果没有,我们知道为什么不这样吗？看起来像是一个很大的文件大小保存,没有什么不利的我.
免责声明我已经尝试搜索组合选择器,合并选择器和几个变体,如果我错过了这个程序的常用术语,抱歉,似乎很可能,因为收益似乎很明显,我必须丢失一些东西！
解决方法
你说：
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;
}
上面的代码如果正常输出,应该像开发者想要的那样呈现级联的红色边框.现在假设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中的两个确切的选择符字符串紧随其后另一个.任何其他情况都可能作出错误的决定.
