嵌套深度

嵌套是一个非常强大的功能，但应谨慎使用。它可以非常容易和快速地发生，你开始嵌套并继续将所有孩子包括在巢，巢，巢中。让我来证明一下：

// SCSS
header {
  // [css-rules]

  .holder {
    // [css-rules]

    .dropdown-list {
      // [css-rules]

      ul {
        // [css-rules]

        li {
          margin: 1rem 0 0 1rem;
        }
      }
    }
  }
}

// CSS output of the last rule
header .holder .dropdown-list ul li {
  margin: 1rem 0 0 1rem;
}

问题

特异性

上面例子中的 li 有一个 margin 集。假设我们希望稍后在媒体查询中覆盖它。

@media (max-width: 480) {

  // will not work
  .dropdown-list ul li {
    margin: 0;
  }

  // will work
  header .holder .dropdown-list ul li {
    margin: 0;
  }
}

因此，通过嵌套太深，无论何时想要覆盖某个值，都必须再次深入嵌套。更糟糕的是，这通常是使用规则 !important 的地方。

@media (max-width: 480) {

  // BIG NO-NO, don't do this
  .dropdown-list ul li {
    margin: 0 !important;
  }

为什么 !important 规则是个坏主意

你应该以良好的方式编写 SCSS，这些解决方案首先是不必要的。在这样一个小问题上使用 !important 已经会让你陷入一个兔子洞！

可重用性

这与特异性问题非常相似，但值得单独指出。如果你设置类似按钮或下拉菜单的样式，你可能希望在页面上的其他位置重用这些样式。

通过嵌套太深，你的样式仅限于位于最外层父级（SCSS 顶部的元素）内的元素。这会导致你复制样式并再次将它们粘贴到其他位置。可能在另一个嵌套规则中。

你的样式表将变得越来越大，越来越难以维护。

你应该有多深？

大多数 styleguides 将最大深度设置为 2.这是一般的好建议，因为很少有你想要深入嵌套的场合。大多数时候，2 就足够了。