前言

今天的目標是對 CSS 樣式進行優化。在昨天完成剩餘主題背景切換功能之後，我注意到 <aside> 元素內的 <ul> 清單和 <button> 按鈕在主題切換過程中會比 <aside> 元素本身更快地轉換顏色。我希望優化這部分的 CSS 確保主題切換時不會出現時間上的差異。

優化主題切換的 CSS

調整 <ul> 清單

首先，我注意到沒有必要在 <ul> 清單中使用 <button> 元素，我可以透過事件監聽器直接處理按下去後的事件。因此，我調整了 <ul> 元素的 HTML 結構，結果如下圖所示：

<aside>
  <button id="closeSidebarButton"><</button>
  <ul class="setting-list">
    <!-- 背景色 -->
    <li id="toggleThemeButton">背景色切換
      <ul class="sub-setting-list">
        <li id="defaultThemeButton">預設</li>
        <li id="lightThemeButton">亮色</li>
        <li id="nightThemeButton">夜間</li>
        <li id="natureThemeButton">自然</li>
      </ul>
    </li>
  </ul>
</aside>

接下來，我對 SCSS 檔案進行整理，除了刪除了與 <button> 相關的部分之外，我還對 SCSS 程式碼的排版進行調整，以便提高可讀性。

整理前的程式碼如下：

.setting-list {
  li {
    #toggleThemeButton {
      background-color: rgb(39, 39, 39);
    }

    .sub-setting-list {
      background-color: rgb(39, 39, 39);
      li {
        button {
          &:hover {
            background-color: rgb(39, 39, 39);
          }
        }
      }
    }
  }
}

整理後的程式碼如下：

.setting-list li #toggleThemeButton {
  background-color: #96d3ae;
}

.sub-setting-list {
    background-color: rgb(39, 39, 39);
    li {
      &:hover {
        background-color: #96d3ae;
      }
    }
}

然後，我希望調整 <ul> 元素的樣式，主要有兩點要求：

1. 使 <ul> 元素的背景顏色與 <aside> 元素的背景顏色在切換時無時間差
2. 為 <ul> 元素增加 ":hover" 效果

關於第一點，經過測試後，我發現只要將 <ul> 元素內的 "background-color" 設定刪除即可解決此問題。

對於第二點，當我為 .setting-list 的 <li> 元素設定背景樣式時，子清單 <ul class="sub-setting-list"> 也會使用相同的背景樣式。

為了解決這個問題，我在 <li> 中的文字增添 <span> 元素，如下所示：

<span id="toggleThemeButton">背景色切換</span>

這樣就可以在不影響子清單的情況下，控制 <li> 元素的 ":hover" 效果。然後，我為兩個清單分別設定 ":hover" 效果的背景樣式，這樣就可以在不同清單中控制 ":hover" 效果了。

.setting-list li #toggleThemeButton,
.sub-setting-list li {
  &:hover {
    background-color: #96d3ae;
  }
}

優化 <button> 樣式

在處理完 <ul> 的問題之後，接下來我要來解決 <aside> 元素中的 <button id="closeSidebarButton"> 按鈕的背景樣式問題。

一開始，我嘗試了很多方法來解決這個問題。一種是在 <aside> 元素中設定按鈕的樣式，如下圖：

aside {
    background-color: #749f82;
    color: white;

    #closeSidebarButton {
      background-color: #749f82;
      color: white;
    }
}

另一種方式則是一開始的設定中使用 class 區分 <button id="closeSidebarButton"> 按鈕和其他按鈕，但這些方法都無法解決我的問題。

最後，我在網路上找到了 inherit 關鍵字。inherit 關鍵字的功能是讓該元素繼承與其父元素相同屬性的值。

通過使用繼承父元素而不是直接設定按鈕樣式的方式，我成功獲得了我想要的結果。現在我在切換主題背景時 <aside> 都不會有背景顏色不同步的問題出現了。

Github 連結

github: ThemeTasker 程式碼
ThemeTasker 靜態網頁

參考資料

mdn: inherit