巢狀結構是 SCSS 中的一個強大特性，能夠讓開發者在編寫層級關係明顯的樣式時更直觀。透過巢狀結構，我們可以將子元素的樣式放在其父元素的範圍內，使樣式表更具組織性和可讀性。但是，過度使用巢狀也可能導致代碼混亂，增加維護難度。因此，平衡巢狀深度與代碼可讀性至關重要!!

一、平衡巢狀深度的建議：

1.限制巢狀層級：

一般來說，巢狀層級不應超過 3 層。過度的巢狀會讓樣式變得複雜，難以追踪和維護，影響可讀性。可以考慮使用類名或 BEM（Block Element Modifier）命名法來解決這個問題。

2.分離責任：

在巢狀過深的情況下，樣式往往變得難以重用。為了提高可維護性，應將全局樣式與局部樣式分離，避免巢狀到具體元素，讓樣式更具通用性。

3.使用父選擇器 (&)：

父選擇器 & 能夠在巢狀結構中靈活運用，有助於避免冗長的選擇器。例如在偽類或狀態變化中，直接在父選擇器內進行定義，而不需要寫重複的選擇器名稱。

二、案例分享

以下是簡單的巢狀結構範例，這段程式碼展示了 3 層巢狀結構。這樣的巢狀層級適中，簡化了類名的書寫，也能清晰表達元素之間的層級關係。

.nav {
  background-color: pink;
  color: blue;

  ul {
    list-style: none;

    li {
      display: inline-block;
      padding: 10px;

      a {
        color: white;
        text-decoration: none;

        &:hover {
          color: gray;
        }
      }
    }
  }
}

巢狀過深時，可以將特定部分拆分為獨立的類或模塊，以提升代碼的可讀性和維護性。

今天的內容稍微簡單，休息一下!

下一周我將介紹混入 (Mixins)