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

以下是有關 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;
}

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

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

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

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

此定制按預期工作。

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

問題

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

❌未來的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 規則就可以自訂填充和邊框元素。

額外福利

在顏色客製化方面，依賴CSS變數簡化了通用配色方案的應用。您可以使用定義整個頁面變數的簡單 CSS 檔案來管理所有顏色設定。

現在，頁面上的所有顏色都可以從一個位置控制。要更新整個頁面的顏色，只需用新的集合取代 CSS 變數定義即可。

這種方法也有助於實現淺色/深色主題或使用者定義的顏色首選項等功能。

結果

？ 更好的可維護性：透過採用CSS變數的定制，程式碼庫變得更易於維護，使以後的更新更簡單、更省時。

？ 減少容易出現錯誤的程式碼：元件內部與其自訂介面之間的清晰分離最大限度地降低了錯誤風險，因為內部實作的變更不會影響元件的自訂方式。

？ 程式碼變得更容易理解：CSS變數的使用使解決方案更直觀、更容易理解。開發者可以快速掌握如何修改樣式，而無需深入研究複雜或不透明的程式碼。

♾️ 與框架無關：您可以在任何地方應用此方法，因為它僅依賴瀏覽器功能。

以上是簡化樣式：可維護程式碼的 CSS 變量的詳細內容。更多資訊請關注PHP中文網其他相關文章！