CSS 自定义属性实战

从基础到动态主题切换，掌握 CSS 自定义属性的声明、继承与运行时修改。 · 难度：入门 · +15XP

什么是 CSS 自定义属性？

CSS 自定义属性（Custom Properties，也称为 CSS 变量）允许你在样式表中定义可复用的值，并通过 var() 函数在任何地方引用。它们拥有真实的级联与继承特性，且可以在运行时通过 JavaScript 动态修改，这是预处理器变量无法做到的。

声明与使用

使用 -- 前缀声明自定义属性，通常放在 :root 中使其全局可用。通过 var() 函数读取，并可以指定后备值。

:root {
  --primary-color: #3498db;
  --base-padding: 16px;
}
.button {
  background-color: var(--primary-color);
  padding: var(--base-padding, 12px); /* 后备值 12px */
  color: white;
  border: none;
  cursor: pointer;
}

继承与作用域

自定义属性遵循 CSS 级联规则。在某个元素上重新声明同名属性，只会影响该元素及其后代。

.dark-section {
  --theme: dark;
  --bg-color: #222;
  --text-color: #eee;
}

.card {
  background: var(--bg-color);
  color: var(--text-color);
}

动态修改：JavaScript 交互

这是自定义属性最强大的特性之一。通过 setProperty 方法，可以实时更新样式。

document.documentElement.style.setProperty('--primary-color', '#e74c3c');

最佳实践与技巧

• 语义化命名：使用 --color-primary 而非 --blue。
• 兜底策略：始终提供后备值，尤其是在旧浏览器中。
• 与 calc() 结合：calc(var(--base-size) * 2) 实现灵活计算。
• 性能注意：频繁修改大量自定义属性可能引起重绘，但通常性能良好。

尝试在右侧编辑器中修改 :root 中的颜色变量，观察按钮颜色的变化。