以下是有關 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 檔案中進行變更
.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中文網其他相關文章！
