为什么要避免过度的嵌套
嵌套是 LESS 提供的一个强大的功能，它可以让我们写出更加优美并且易于维护的 CSS。但是，过度的嵌套会导致 CSS 选择器过于复杂，由此引发的问题有：可读性差、样式污染、代码冗余等。
例如，以下是一段过度嵌套的代码：
-- -------------------- ---- -------
-------- -
-- -
-- -
- -
------ -----
------- -
---------------- ----------
-
-
-
-
-这段代码虽然看起来很优美，但是当选择器过于复杂时，就会对页面渲染性能产生不利影响。
如何避免过度的嵌套
遵循“深度不超过三级”的原则
在编写 LESS 代码时，我们应该遵循“深度不超过三级”的原则，这样可以让代码更加易于理解，同时还能够保证性能表现。
例如，我们可以将上面的例子转化为：
-- -------------------- ---- -------
-------- -
-- -
-- -
- -
------ -----
-
------- -
---------------- ----------
-
-
-
-这段代码清晰简洁，同时也遵循了“深度不超过三级”的原则。
采用 BEM 命名约定
BEM 命名约定是一种用于编写 CSS 类名的规范，它可以帮助我们避免过度嵌套，同时让代码更易读、易维护。
BEM 命名约定的基本原则是将样式分解为块、元素、修饰器三个部分，例如：
-- -------------------- ---- -------
------- -
------- -
-- ---
-
------- -
-- ---
-
-------- -
-- ---
-
-这段代码中，.person 是一个块级元素，它包含了 .person__head 和 .person__body 两个元素，同时还有一个 .person--small 的修饰器。
使用 Mixin
Mixin 是 LESS 提供的一种定义可重用样式的方法，它可以帮助我们避免重复代码，并且可以将样式的定义从 HTML 中分离出来，同时也能避免过度的嵌套。
例如，我们可以定义一个 Mixin，用于设置一个元素的字体和颜色：
.font-and-color(@font-size, @color) {
font-size: @font-size;
color: @color;
}然后，就可以在需要使用这个样式的地方调用这个 Mixin：
h1 {
.font-and-color(18px, #333);
}这样可以有效减少样式的嵌套，同时还能让代码更加易于维护。
总结
避免过度的嵌套是写出好的 LESS 代码的重要原则之一。我们可以采用避免过度嵌套的方法，例如遵循“深度不超过三级”的原则、采用 BEM 命名约定、使用 Mixin 等方法。这样可以让我们编写出更易读、易维护的 CSS 代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649417c048841e98941a00b6