'# CSS 【详解】自定义属性（又名 CSS 变量）
一、背景与问题
CSS 自定义属性（CSS 变量）是 CSS3 引入的特性，它允许开发者在 CSS 中定义可复用的值，并通过 JavaScript 动态修改。这项技术在现代前端开发中被广泛应用，尤其是在构建动态主题、响应式布局和可维护的样式代码时。
然而，许多开发者对 CSS 变量的原理和适用场景存在误解。例如，有人误以为 CSS 变量是“普通 CSS 属性的升级版”，实际上它在底层实现上有着完全不同的机制。本文将深入剖析 CSS 变量的原理、使用场景、常见问题和最佳实践，帮助开发者掌握这项技术。
二、基本原理
CSS 变量的核心机制是通过 :root 或任意选择器定义变量，然后通过 var() 函数在其他地方引用。其底层实现基于 CSSOM（CSS Object Model）的 document.styleSheets 接口，浏览器会将变量存储在 CSSOM 的 customProperties 属性中。
1. 变量定义与作用域
CSS 变量的定义方式如下：
:root {
--primary-color: #3498db;
--font-size: 16px;
}变量作用域遵循 CSS 选择器的优先级规则。例如：
:root定义的变量在全局生效.container定义的变量仅在.container元素及其子元素中生效- 变量在子元素中可以被覆盖
2. 变量解析机制
CSS 变量在解析时遵循以下规则：
- 浏览器先解析 CSSOM，将变量存储为
customProperties对象 - 当渲染时，浏览器会将
var(--var-name)替换为对应的值 - 如果变量未定义或失效，则替换为
initial值（通常是transparent）
3. 变量的动态性
CSS 变量的动态性体现在：
- 可通过 JavaScript 动态修改
- 可通过
@media查询触发重新计算 - 可通过
:host选择器在 CSS-in-JS 框架中使用
三、环境准备
1. 基础环境
确保开发环境支持 CSS 变量（所有现代浏览器均支持，包括 IE11 通过 polyfill）。
2. 开发工具
- 使用 PostCSS 自动处理 CSS 变量（可选）
- 使用 Chrome DevTools 的 "Computed" 面板查看变量值
- 使用
document.defaultView.getComputedStyle获取变量值
四、核心实现
1. 基础用法
:root {
--primary-color: #3498db;
--font-size: 16px;
}
body {
background-color: var(--primary-color);
font-size: var(--font-size);
}关键代码解释：
:root是全局作用域的默认选择器var(--var-name)是变量引用语法- 变量值可以是任意 CSS 值（颜色、长度、字符串等）
2. 动态修改（JavaScript）
document.documentElement.style.setProperty('--primary-color', '#e74c3c');关键代码解释：
- 通过
document.documentElement修改根元素的变量 setProperty()方法支持动态更新- 变量修改会触发重新计算（Reflow）
3. 嵌套作用域
.container {
--padding: 20px;
}
.container .item {
padding: var(--padding);
}关键代码解释：
.container定义的变量在.item中生效- 变量可以在子元素中被覆盖
- 父元素的变量不会自动继承到子元素
五、完整案例
1. 响应式主题切换器
<!DOCTYPE html>
<html>
<head>
<style>
:root {
--primary-color: #3498db;
--font-size: 16px;
}
body {
background-color: var(--primary-color);
font-size: var(--font-size);
}
.theme-toggle {
cursor: pointer;
}
</style>
</head>
<body>
<button class="theme-toggle">切换主题</button>
<script>
const toggle = document.querySelector('.theme-toggle');
toggle.addEventListener('click', () => {
const isDark = document.documentElement.style.getPropertyValue('--primary-color') === '#2c3e50';
document.documentElement.style.setProperty('--primary-color', isDark ? '#3498db' : '#2c3e50');
document.documentElement.style.setProperty('--font-size', isDark ? '14px' : '16px');
});
</script>
</body>
</html>关键代码解释：
- 通过 JavaScript 切换主题颜色和字体大小
- 变量修改会立即生效
- 使用
getPropertyValue()获取变量值
2. 动态布局尺寸控制
:root {
--max-width: 1200px;
--gutter: 20px;
}
.container {
max-width: var(--max-width);
padding: 0 var(--gutter);
}关键代码解释：
- 通过变量控制布局的尺寸
- 修改变量可快速调整布局
- 变量值可结合媒体查询动态调整
六、源码解析
1. CSSOM 的 customProperties 接口
const styleSheet = document.styleSheets[0];
console.log(styleSheet.cssRules[0].style.customProperties);关键代码解释：
customProperties是 CSSOM 的一个属性- 用于获取所有 CSS 变量
- 可用于调试或动态读取变量值
2. 变量解析流程
- 解析 CSS 时，将变量存储在
customProperties中 - 渲染时，浏览器将
var(--var-name)替换为对应的值 - 如果变量未定义，则替换为
initial值
七、进阶使用
1. 结合 CSS-in-JS 框架
const theme = {
primaryColor: '#3498db',
fontSize: '16px'
};
document.documentElement.style.setProperty('--primary-color', theme.primaryColor);
document.documentElement.style.setProperty('--font-size', theme.fontSize);关键代码解释：
- 通过 JavaScript 动态设置变量
- 可配合 React、Vue 等框架使用
- 需注意变量作用域的管理
2. 响应式布局优化
:root {
--breakpoint: 768px;
}
@media (max-width: var(--breakpoint)) {
body {
font-size: 14px;
}
}关键代码解释：
- 使用变量控制媒体查询的阈值
- 提高响应式布局的可维护性
- 变量值可动态调整
八、性能与工程实践
1. 性能优化
1.1 避免频繁重计算
- 使用
transform而非直接修改布局属性 - 避免在
@media中频繁使用变量
1.2 变量值优化
- 避免在变量中存储复杂计算值
- 预计算常用值，避免重复计算
2. 异常处理
try {
document.documentElement.style.setProperty('--invalid-var', 'invalid');
} catch (e) {
console.error('无效的 CSS 变量值:', e);
}关键代码解释：
- 捕获无效变量值的错误
- 避免因无效值导致的渲染错误
3. 安全风险
- 避免在用户输入中直接使用变量值
- 对动态设置的变量值进行严格校验
- 防止 XSS 攻击（如
document.write()中的变量注入）
九、常见问题与踩坑
1. 常见错误
1.1 变量未定义导致的错误
body {
background-color: var(--invalid-var);
}错误原因： --invalid-var 未定义
解决方法： 添加默认值
body {
background-color: var(--invalid-var, #fff);
}1.2 变量作用域错误
.container {
--font-size: 16px;
}
.container .item {
font-size: var(--font-size); /* 无效！ */
}错误原因： 变量作用域限制
解决方法： 使用 :root 定义全局变量
2. 常见坑
2.1 变量值类型不一致
:root {
--font-size: 16px;
}
body {
font-size: var(--font-size); /* 16px */
}document.documentElement.style.setProperty('--font-size', 16); // 无效！错误原因： JavaScript 设置变量值时未使用字符串
解决方法：
document.documentElement.style.setProperty('--font-size', '16px');十、最佳实践
1. 使用场景推荐
- 主题切换器（如暗色模式）
- 响应式布局的尺寸控制
- 动态的 UI 配置（如图标颜色、边框宽度）
- CSS-in-JS 框架中的样式管理
2. 使用场景不推荐
- 基础样式（如
font-family、color等） - 布局的复杂计算（如
calc()与变量结合） - 高频更新的样式（如动画关键帧）
3. 推荐做法
- 使用
:root定义全局变量 - 使用
@media动态调整变量 - 通过 JavaScript 动态修改变量时，确保值类型正确
十一、总结
CSS 自定义属性（CSS 变量）是一项强大的前端技术，它为动态样式管理提供了全新的解决方案。通过理解其底层原理、掌握正确使用方法、避免常见错误，开发者可以更高效地构建可维护、可扩展的 CSS 代码。
在实际开发中，CSS 变量最适合用于需要动态调整的样式场景，如主题切换、响应式布局和动态 UI 配置。但需注意避免滥用，特别是在处理基础样式和复杂计算时。通过合理的实践和性能优化，CSS 变量将成为现代前端开发的得力工具。
记住：CSS 变量不是普通 CSS 属性的升级版，而是通过 CSSOM 实现的动态样式管理机制。理解它的本质，才能真正发挥其价值。