在網(wǎng)站開發(fā)過程中經(jīng)常要考慮CSS變量，這篇文章延續(xù)了Immortal CSS Classnames的主題，其中基于目的而不是外觀的名稱可以容忍視覺變化。同樣的前提適用于命名CSS變量以及與此相關(guān)的任何可視標記（例如在設(shè)計系統(tǒng)中找到的JSON）。

CSS變量在不同的上下文中可以具有不同的值，這使它們的命名變得更加困難和重要。變色龍會在不同條件下改變顏色，以偽裝，調(diào)節(jié)體溫或向其他變色龍發(fā)出信號。CSS變量在重命名，主題設(shè)置，白色標記以及亮或暗模式期間均可以同等更改。

這意味著變量名稱不應與單個上下文耦合，否則在其他上下文中該名稱將變得毫無意義。例如，該變量--white-bg在亮模式下工作良好，但在暗模式下失去所有含義。

讓我們看一下（在此站點上使用的）4個CSS變量，以展示對命名事物的刻意關(guān)注如何導致長期的表現(xiàn)力和靈活性。

變量是：accent適度使用的鮮艷色彩增加了視覺趣味和個性,foreground關(guān)于深度感知，前景是最靠近觀看者的可視窗格,background離查看器最遠的可視窗格,middleground位于前景和背景之間的可視窗格.

請注意，每個變量名稱與其外觀無關(guān)。顏色可以由任何組件，組成或上下文使用，并且可以在未來進行驗證，以防止視覺變化（例如品牌重塑），甚至尚不支持CSS功能。