過度巢狀的問題

• 生成過於複雜的選擇器：過多的巢狀會導致生成的 CSS 選擇器過於長且複雜，影響性能
• 維護困難：巢狀層次過深時，修改樣式會變得困難，因為需要追蹤多個層級的選擇器
• 結合性太強：樣式過度依賴於具體的 HTML 結構，當結構變動時，樣式可能需要大幅修改

避免過度巢狀的技巧

• 控制巢狀層級：一般來說，巢狀層級不應超過三層。過度的巢狀會讓樣式變得不易閱讀。
• 使用 & 來簡化巢狀：& 可以用來引用當前選擇器，減少重複寫父選擇器名稱。
• 抽取重用的樣式：避免過度巢狀，可以將重複的樣式抽取出來，做成 mixin 或者單獨的 class

父選擇器（Parent Selector）是什麼？

• 用 & 符號來表示，這個符號引用當前的父選擇器
• 用來避免在巢狀結構中重複書寫父選擇器名稱，讓程式碼更簡潔
• 幫助生成複合選擇器或偽類選擇器

父選擇器的應用場景

• 偽類選擇器巢狀 : 用於應用樣式在特定狀態下
• 複合選擇器的組合 : 可以結合不同class
• 媒體查詢內巢狀 : 在媒體查詢內使用父選擇器來保持父選擇器不變