剛開始學前端那會兒，我最崩潰的一件事不是寫不出組件，而是——樣式根本“養(yǎng)不住”。

同一個項目里：

• 這個頁面按鈕間距是 14px
• 另一個頁面按鈕卻寫成了 0.5rem
• 卡片圓角這邊 10px，那邊 15px
• 表單對齊看起來永遠差一點點，像牙縫里卡了根刺

你改一個地方，另一個地方又“歪回去”。 你以為你在做 UI，實際上你在玩“打地鼠”。

于是我打開瀏覽器，點開 Inspect，開始查兇手。 結果發(fā)現(xiàn)：問題根本不在組件，而在設計系統(tǒng)——它在后臺悄悄把一致性掐死了。

按鈕在 A 頁是 padding: 14px，B 頁是 0.5rem，還有文件里突然冒出個 margin: 12px。 它們都看起來“差不多”，但加在一起就是：全站視覺開始漂移。

后來我發(fā)現(xiàn)了一個 CSS 功能：小到你會忽略，但一用上，你會覺得自己像突然學會了“團隊協(xié)作”的語言。

能毀掉每個設計系統(tǒng)的根源問題

你做 UI 的時候一定做過這些事：

• 定字體大小
• 定組件間距
• 選顏色
• 選圓角
• 搭組件結構

剛開始都挺好。 過幾天就開始塌。

為什么？因為大多數(shù)人會在組件里臨場發(fā)揮：

.submitButton {
  padding: 22px;
  border-radius: 10px;
}
.card {
  padding: 20px;
  border-radius: 15px;
}
.inputBox {
  margin-bottom: 24px;
}

這些值怎么來的？ 基本都是一句話決定：

• “12px 看起來挺順。”
• “這里 14px 好像更合適。”
• “圓角 7px 有點硬，改 9px 吧。”

于是問題開始連鎖反應：

• 不同頁面的間距對不上
• 卡片組件在各處長得像“親戚但不熟”
• 一旦要改風格，重構成本爆炸
• 最后你會發(fā)現(xiàn)：你根本沒有設計系統(tǒng)，你只有一堆“差不多的樣式”

那怎么治？

解決方案：把“設計決策”收歸中央

答案很小：CSS 變量（CSS Custom Properties）。 把所有“系統(tǒng)級的設計決策”（圓角、間距、字號）統(tǒng)一放在一個地方，然后讓所有組件來引用它。

這個地方通常就是 :root：

:root {
  --radius-small: 4px;
  --radius-medium: 8px;
  --radius-large: 12px;

  --space-one: 4px;
  --space-two: 8px;
  --space-three: 12px;

  --font-small: 0.875rem;
  --font-medium: 1rem;
  --font-large: 1.25rem;
}

然后組件不再隨手寫“我覺得多少合適”，而是改成“我用系統(tǒng)給我的標準值”。

.button {
  padding: var(--space-two);
  border-radius: var(--radius-medium);
}

.card {
  padding: var(--space-four);
  border-radius: var(--radius-large);
}

.input {
  margin-bottom: var(--space-three);
  font-size: var(--font-medium);
}

從這一刻起，每個組件都不再“獨立拍腦袋”。 它們開始依賴同一套根規(guī)則。 一致性就這么被“鎖住”了。

真實對比：用不用變量，代碼氣質完全不一樣

沒有設計系統(tǒng)時（常見現(xiàn)場）

.card {
  padding: 18px;
  border-radius: 7px;
}

.button {
  padding: 12px 17px;
  border-radius: 6px;
}

.input {
  font-size: 13px;
  margin-bottom: 14px;
}

看起來能跑。 但沒有復用、沒有標準、沒有“語言”。

用 CSS 變量之后

:root {
  --space-three: 12px;
  --space-four: 18px;
  --radius-medium: 8px;
  --font-medium: 1rem;
}

.card {
  padding: var(--space-four);
  border-radius: var(--radius-medium);
}

.button {
  padding: var(--space-three) var(--space-four);
  border-radius: var(--radius-medium);
}

.input {
  margin-bottom: var(--space-three);
  font-size: var(--font-medium);
}

這段代碼的變化不是“更短”，而是更像系統(tǒng)。 你能一眼看出：什么是間距體系，什么是圓角體系，什么是字號體系。

用了這條規(guī)則之后，你會立刻得到什么

• 不需要再猜值：你不會每天糾結 12px 還是 14px
• 全局改動變得極快：比如你想讓整個系統(tǒng)更松一點，只改一個變量就行

:root {
  --space-three: 14px;
}

• 團隊開始說同一種話： “主間距用 --space-three。” “中等圓角用 --radius-medium。” 這才叫設計系統(tǒng)，不是“大家自己看著寫”。

最爽的是：你完全不用換技術棧

你不需要：

• Tailwind
• Sass
• Styled Components
• CSS-in-JS

你只需要瀏覽器——因為 CSS Custom Properties 早就被現(xiàn)代瀏覽器支持了。 純 CSS 就能干。

結論

CSS 變量不是花活，它是設計系統(tǒng)的“底座”。 把間距、圓角、字號這些會反復出現(xiàn)的設計決策收口到 :root，你就等于給整個項目建立了統(tǒng)一標準。

UI 會更一致。 維護會更輕松。 代碼會更像一個資深工程師寫出來的系統(tǒng)，而不是一堆臨場發(fā)揮的樣式碎片。

下次再聊一個更狠的 CSS 小技巧。