更少的嵌套生成错误的CSS代码？

在下面的文章中，我读到应该尝试减少selector的数量

我想知道，如果写得更少，并且我使用了大量嵌套来对父元素和子元素进行分组，那么最终会生成糟糕的CSS代码吗

少

---

LESS或SASS等语言在声明样式规则时提供了更大的灵活性，这取决于您如何使用它。一种语言的灵活性越强，就越需要设计模式和良好实践来避免让事情变得比以前更糟

少并不需要你总是窝。当然，您可以始终使用CSS，如果您要对所有

p

应用样式，则最好全局定义它，而不是调用mixin在多个嵌套

p

上获得相同的结果

但是LESS和SASS确实允许您避免重复，编写更清晰、更易于维护的代码，以及由CSS所需的代码重复引起的其他问题

我使用了大量嵌套来对父元素和子元素进行分组，这最终会生成糟糕的CSS代码吗

总之，是的。从长远来看，这将为您提供高度特定、无法维护的CSS。让我们看看您的示例将为

h1

样式生成什么

.wrap header h1{ color: red; }

因此，您在这里得到的是一个非常特定的CSS选择器，这并不是真正必要的。例如，你可以

h1 { color: red; }

或者在

h1

.title { color: red; }

.new-color { color: blue; }

为什么专一性不好？ 想象一下，6个月后，另一个开发人员出现了，他们需要更改

h1

的颜色，但只是其中一个

首先，他们尝试将类添加到

h1

.title { color: red; }

.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

，检查它们是否有父

标题

，然后检查它们是否有父类

换行

。如果是这样，它将应用样式。低特异性使渲染过程简单得多

总结

---

因此，总而言之，嵌套虽然看起来很好，但它可以保持代码的美观和可读性，应该只在绝对必要时使用。很容易忘记实际生成的CSS是什么样子的。在你意识到这一点之前，你将陷入嵌套的地狱。

不完全是“坏的”，但如果你生成的css开始看起来像

a>b>c>d>…>z{color:blue；}

当遇到一个

z

元素需要改为红色时，您将很难想出如何重写某些内容。LESS支持嵌套样式，这是非常棒和强大的。也就是说，您应该始终使用尽可能低的特异性选择器。这意味着您应该避免嵌套，除非您需要。链接文章与LESS或在LESS中嵌套选择器无关。当需要时，应仅使用较少的值嵌套选择器。TL；DR yes它将根据您的规范生成“坏”CSS代码。