巢狀深度

巢狀是一個非常強大的功能，但應謹慎使用。它可以非常容易和快速地發生，你開始巢狀並繼續將所有孩子包括在巢，巢，巢中。讓我來證明一下：

// 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 就足夠了。