簡化樣式：可維護程式碼的 CSS 變量-css教學-PHP中文網

首頁

web前端

css教學

簡化樣式：可維護程式碼的 CSS 變量

王林

Aug 22, 2024 am 08:32 AM

以下是有關 CSS 變數如何簡化可重複使用和可自訂元件的支援的一些見解。無論您使用什麼框架，這種方法仍然與框架無關。

樣品組件

假設我需要將進度條元件加入我的 UI 工具包。以 React 為例，這是一個簡單的實作。

import "./ProgressBar.css";

export function ProgressBar({percentage} : {percentage: number} ){
  return ( 
    <div className="progress-bar">
      <div className="fill"
        style={{ width: percentage + "%"}}
      />
    </div>
  )
}

登入後複製

以及用於添加顏色和基本規則的 CSS

.progress-bar{
  width: 200px;
  height: 20px;
  border: 1px solid black;
}

.progress-bar .fill{
  height: 100%;
  background: black;
}

登入後複製

預設是黑色的，看起來像這樣

Streamlining Styles: CSS Variables for Maintainable Code

該元件應該在我的應用程式的各個部分中重複使用。我希望每個消費者都應該能夠靈活地客製化長條圖及其邊框的顏色，以符合他們的特定需求和配色方案。

我希望消費者提供自己的 CSS 規則來覆蓋預設顏色。例如，消費者可以編寫以下 CSS 以使上傳部分中的進度條變為綠色。

#upload .progress-bar{
  border-color: green
}
#upload .progress-bar .fill {
  background-color: green;
}

登入後複製

此定制按預期工作。

Streamlining Styles: CSS Variables for Maintainable Code

每個消費者都可以採用相同的方法，乍一看，這似乎是一個可靠的解決方案。

問題

但是，這種客製化方式有幾個缺點

❌未來的bug：長期來看，進度條組件將會被更新或重構。如果重新命名類別或更改標籤的層次結構，自訂將會中斷。
？ 消費者的認知負荷：使用我的元件的開發人員需要檢查其 HTML 結構，以確定覆蓋預設值所需的 CSS 規則。
⚒️ 繁瑣的自訂程式碼：修改欄的顏色及其邊框需要寫兩個單獨的規則。

當然，對於像我們的 ProgressBar 這樣的簡單情況來說，這並不是什麼大問題。然而，大型 UI 套件中更複雜的元件，尤其是當許多開發人員使用時，可能會帶來重大挑戰。

CSS 變數作為解決方案

為了簡化客製化並緩解這些問題，我們可以利用 CSS 變數。

在我的範例元件中，僅在 CSS 檔案中進行變更

.progress-bar{
  --progress-bar-color: black;
  width: 200px;
  height: 20px;
  border: 1px solid var(--progress-bar-color);
}

.progress-bar .fill{
  height: 100%;
  background: var(--progress-bar-color);
}

登入後複製

請注意，我聲明了變數 --progress-bar-color 來設定顏色。消費者現在可以輕鬆自訂組件

#upload .progress-bar{
  --progress-bar-color: green;
}

登入後複製

透過這個新方法，讓我們重新審視自訂問題清單

❌未來的bug：作為進度條的開發者，我可以根據需要修改類別名稱和層次結構。但是，只要我將 CSS 變數正確地應用到更新的元素，消費者所做的顏色自訂就保持不變。
？ 消費者的認知負荷：消費者不再需要檢查我的組件的代碼來自訂顏色。 CSS 變數可作為“介面”或“抽象”，允許他們簡單地設定所需的顏色，而無需深入研究實作細節。
⚒️ 繁瑣的自訂程式碼： 現在，單一 CSS 規則就可以自訂填充和邊框元素。