偶然翻書學到的。
簡述
簡單來說就是在 body 上添加特定的 class / id 來表示「狀態」。
來看一個在寫導覽列按鈕時常會碰到的問題，假設有個頁面的 HTML 長這樣：
1
2
3
4
5
6
7
|
<ul>
<li><a class="link current" href="#">頁面一</a></li>
<li><a class="link" href="#">頁面二</a></li>
<li><a class="link" href="#">頁面三</a></li>
<li><a class="link" href="#">頁面四</a></li>
</ul>
|
為了讓 user 知道目前所在位置，通常會用 CSS 把那個目前的位置給「標示出來」，所以根據上面的內容，會這樣寫：
1
2
3
4
5
6
7
| .link {
color: black;
}
.link.active {
color: red;
}
|
好，最麻煩問題來了。如果我要讓其他頁面也能配合這個 CSS，我就得改 HTML：
1
2
3
4
5
6
7
8
|
<ul>
<li><a class="link" href="#">頁面一</a></li>
<li><a class="link current" href="#">頁面二</a></li>
<li><a class="link" href="#">頁面三</a></li>
<li><a class="link" href="#">頁面四</a></li>
</ul>
|
只是加個 class 好像不麻煩？也許是這樣沒錯。可是，如果你有 100 個頁面，有天 PM 這樣跟你說：
欸欸，那個 current 的語意不太好懂，改成 active 好嗎？
這下你除了改一隻 CSS 檔案以外，你還得把每個頁面的 HTML 都調整成 active。這個時候你還覺得不麻煩嗎？
所以其實有更好的做法，參考以下解法：
1
2
3
4
5
6
7
8
| <body id="home">
<ul>
<li><a class="link" href="page1">頁面一</a></li>
<li><a class="link" href="page2">頁面二</a></li>
<li><a class="link" href="page3">頁面三</a></li>
<li><a class="link" href="page4">頁面四</a></li>
</ul>
</body>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| .link {
color: blue;
}
#home .link[href="page1"] {
color: red;
}
#about .link[href="page2"] {
color: red;
}
#servie .link[href="page3"] {
color: red;
}
#product .link[href="page4"] {
color: red;
}
|
這個就跟 JavaScript 裡的 event delegation 有點異曲同工之妙，與其從按鈕來判定目前狀態，倒不如交給上層的父元素來處理不就好了？
雖然這個做法一樣要調整 HTML，但要調整的地方會少很多。因為你把「狀態」都交給 body 來控制了。
目前只有連結可能感受不太到差異，可是當有其他類似的樣式也是針對「特定頁面」來處理的時候，就會明白現在的做法比較好。
總而言之，現在把狀態都透過 body 的 class / id 來管理，你只要把重點著重在 CSS 就好，不用再針對特定元素來一個一個調整了。