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

Question

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

文章:使用较少的选择器

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

减

.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个月后,另一位开发人员出现了,他们需要改变a的颜色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是什么样的.在你知道它之前,你将陷入困境.