【HTML、CSS教學】16. className堆疊

🚩 前言

在維護別人的專案時，很多時候無法堅持用自己的準則來面對別人的程式碼，即便重構是一種選擇，但因為很多 BUG 是有急迫性的，前端不會在乎程式碼寫的多漂亮，只在乎現在話面怎麼有問題。

在這情況下，使用 className 堆疊 來調整 CSS 樣式就是一種選擇。

🚩 CodePen 範例

範例中有兩行原先是 .green 的顏色，因為需求而被改成了粉紅色，
利用權重堆疊的方式，超過原本 .green 的10分。

.demo ul li ul li.green {
  background-color: salmon;
}

因為新需求而要改回綠色時，
若是在不改變 HTML 標籤、使用 !important 以及更動其他 CSS 的情況下，
可以將 .green 的 className 做堆疊，超過上面的分數 24 分。

.green.green.green {
 background-color: lightgreen;
}

要注意的是 .green 與 .green 中間是沒有空白的，否則會變成階層的關係。

💡 tip: 分數計算可參考另一篇教學 【HTML、CSS教學】5. CSS權重