Question

由于使用较少，我开始越来越多地使用嵌套。它干净且易于理解，但由于嵌套，我使用的选择器比正常情况多。

例如（简化）：

#footer {
    background: @footer-background;
    padding: 20px 0;
    margin-bottom: 20px;

    .seal {
        width:22%;

        img {
            display:block;
            margin:0 auto;
        }
    }

    .copyright {
            margin: 20px 0 0;
    }
}

或者：

#footer {padding: 20px 0; margin-bottom: 20px}
#footer .seal {width:22%}
#footer img {display:block; margin:0 auto}
.copyright {margin: 20px 0 0}

第一个将导致其他选择器不是真正需要的，但它也可以防止重复，并且可以轻松找到并删除所有未使用/不需要/重复的css。所有这一切都发生在你的文件较少的结构中。

我认为开发时间的缩短值得额外选择。我认为我的开发时间会更好地花在其他地方......但我对这个答案没有信心。

我应该避免不必要的嵌套，还是值得损失的收益？

Answer 1

您可以实现组织和最低特异性

通常建议使用最不具体的选择器来完成工作。如果您的主要愿望是在结构组织中为LESS做一些嵌套，那么您可以实现两全其美。修改简化示例：

<强> LESS

#FOOTER() {
    #footer {
      background: @footer-background;
      padding: 20px 0;
      margin-bottom: 20px;

      .seal {
        width:22%;
      }

      img {
        display:block;
        margin:0 auto;
      }
   }
  .copyright {
       margin: 20px 0 0;
  }
}

#FOOTER();

CSS输出（原始的较短代码）

#footer {
  background: some color you set for @footer-background;
  padding: 20px 0;
  margin-bottom: 20px;
}
#footer .seal {
  width: 22%;
}
#footer img {
  display: block;
  margin: 0 auto;
}
.copyright {
  margin: 20px 0 0;
}

我使用了一个带有一组括号的mixin来＆＃34; group＆＃34;与页脚区域相关的样式，并调用mixin实际输出样式。这允许我将代码保持在一起，并将其插入＆＃34;无论在何处＆＃34;在我的最终输出css中。但是这些风格可以更松散地分组。所以我已将img移到.seal之外，将.copyright移到#footer之外。可能在img内的html或.seal内的.copyright 中找到了#footer，但如果这与选择无关它，然后只知道它与#FOOTER()组相关可能足以满足您的组织需求。

这仍然只是一个改进，而不仅仅是/*comment*/分隔一个组，因为它仍然可以最大限度地减少重复（#footer不重复），并且它允许我输出一个css有条理的方式 - 人们可以设想这个：

#RESET();
#HEADER();
#CONTENT();
#FOOTER();

内部#HEADER();可能是其他一些子分组：

#NAV();
#BRANDING();

这可能是意见，但在我看来，选择器很少需要多个嵌套级别来获得结构良好的html页面所需的特异性。一组异常是兄弟关系，有时需要一组复杂的嵌套和兄弟关系来选择元素。

当然，您必须注意，例如，.copyright中定义了#FOOTER()，但它输出的选择器不一定限于该区域。如果您作为设计师知道，则版权不会出现在其他地方，好吧。如果没有，那么将其归入#footer下将非常重要。

少 - 我应该避免不必要的嵌套吗？

1 个答案:

您可以实现组织和最低特异性