CSS解偶是指將CSS樣式與HTML結構分離，使得樣式與結構之間互不依賴。這樣能夠使得網頁結構更加清晰簡潔，也便于后期維護和修改。以下是一些CSS解偶的方法：

// 以類選擇器為例
HTML：
<div class="wrapper">
<h1>標題</h1>
<p>內容</p>
</div>
CSS：
.wrapper {
width: 800px;
margin: 0 auto;
}
.wrapper h1 {
font-size: 24px;
color: #333;
}
.wrapper p {
font-size: 16px;
color: #666;
}
// 以id選擇器為例
HTML:
<div id="wrapper">
<h1>標題</h1>
<p>內容</p>
</div>
CSS：
#wrapper {
width: 800px;
margin: 0 auto;
}
#wrapper h1 {
font-size: 24px;
color: #333;
}
#wrapper p {
font-size: 16px;
color: #666;
}
// 以標簽選擇器為例
HTML：
<div class="wrapper">
<h1>標題</h1>
<p>內容</p>
</div>
CSS：
.wrapper {
width: 800px;
margin: 0 auto;
}
h1 {
font-size: 24px;
color: #333;
}
p {
font-size: 16px;
color: #666;
}

通過以上例子，我們可以看到CSS解偶能夠將樣式代碼與HTML結構代碼分開，提高了代碼可讀性和維護性。這樣能夠使得開發過程更加高效，也便于修改和調試。