Question

在下面的文章中，我读到应该尝试减少硒化物的数量。

我想知道如果写LESS并且我使用大量嵌套来对父元素和子元素进行分组，那么最终会产生错误的CSS代码吗？

LESS

.wrap{
   width: 100%;
   height: 20%;
   background: green;
   header{
           background: blue;
           h1{
                color: red;
             }
         }
 }

Answer 1

我正在使用大量的嵌套来对父元素和子元素进行分组，最终是否会生成错误的CSS代码？

总之，是的。从长远来看，这将为您提供高度具体，不可维护的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是什么样的。在你知道它之前，你将陷入困境。

Answer 2

LESS或SASS等语言可以更灵活地声明您的样式规则，根据您的使用方式，这可能是好的也可能是坏的。您在语言中的灵活性越高，您就越需要设计模式和良好实践，以避免比以前更糟糕。

LESS不会要求你总是筑巢。当然，您总是可以使用CSS，如果要将样式应用于所有p，则最好全局定义它，而不是调用mixins以在几个嵌套p上获得相同的结果。

但是LESS和SASS确实可以避免重复，编写更清晰，更易于维护的代码，以及CSS所需的代码重复导致的其他问题。

LESS - 嵌套生成错误的CSS代码？

2 个答案:

为什么特异性不好？

效果

摘要