<分区>
在下面的文章中，我读到应该尝试减少选择器的数量。
我想知道如果编写 LESS 并使用大量嵌套来对父元素和子元素进行分组，最终会生成错误的 CSS 代码吗？
少
.wrap{
width: 100%;
height: 20%;
background: green;
header{
background: blue;
h1{
color: red;
}
}
}
最佳答案
I'm using a lot of nesting to group parent and child elements, will that generate bad CSS code in the end?
一句话，是的。从长远来看，这会给你高度具体的、不可维护的 CSS。让我们看看您的示例将为 h1 样式生成什么。
.wrap header h1{ color: red; }
所以您在这里得到的是一个非常具体的 CSS 选择器，这并不是真正必要的。例如，你可以有
h1 { color: red; }
或者在 h1
.title { color: red; }
想象一下，6 个月后，另一个开发人员出现了，他们需要更改 h1 的颜色，但只是其中一个。
首先，他们尝试向 h1
.new-color { color: blue; }
但是颜色并没有改变，因为原始的 CSS 非常具体。所以他们必须这样做
.wrap header h1.new-color { color: blue }
或者更糟的是他们可能会这样做
.new-color { color: blue!important; }
然后当需要进行其他更改时会发生什么？正如您可以非常快速和轻松地看到的那样，您最终可能会得到无法维护的 CSS，这会让每个人都抓狂。
人们通常会在谈到 CSS 时否定性能，但了解呈现页面时发生的情况总是好的。 CSS 从右到左阅读。使用你的例子
.wrap header h1 { color: red; }
这意味着浏览器引擎将搜索每个 h1 并检查它们是否有父 header，然后检查是否有父类 wrap。如果是这样，它将应用样式。低特异性使渲染过程更加简单。
所以总而言之，嵌套虽然看起来可以很好地保持代码的美观和可读性，但只应在绝对必要时使用。很容易忘记实际生成的 CSS 是什么样子的。在不知不觉中，您将陷入嵌套 hell 。
关于css - LESS - 嵌套会生成错误的 CSS 代码？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22175299/