CSS順序和方法

在進行CSS樣式的開發時，遵循一定的順序和使用一些有效的方法可以使樣式更加易于維護和調試。下面是一些指導原則：
1. 選擇器的層次結構：
選擇器的層次結構是指按照從外到內的元素嵌套關系編寫CSS樣式，這種層次結構可以增加CSS的可維護性，也可以提高樣式的效率。例如：
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.container .box {
width: 50%;
float: left;
}
.container .box p {
font-size: 16px;
}
2. 嵌套選擇器：
嵌套選擇器是指將一個選擇器作為另一個選擇器的子選擇器來使用。在嵌套選擇器中使用&符號可以讓選擇器自我引用。例如：
.btn {
&.primary {
color: #fff;
background-color: #007bff;
border-color: #007bff;
}
}
3. 通用選擇器：
通用選擇器（*）是指匹配所有元素，通常不建議使用，因為它會遍歷每一個元素，降低頁面性能。
4. !important規則：
!important規則是指強制使用某個CSS樣式的優先級最高，注意不要濫用。
5. Sass的@extend指令：
@extend指令是指可以繼承另一個選擇器的樣式，可以減少代碼的冗余。