CSS 【详解】自定义属性（又名 CSS 变量）

'# 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 变量在解析时遵循以下规则：

1. 浏览器先解析 CSSOM，将变量存储为 customProperties 对象
2. 当渲染时，浏览器会将 var(--var-name) 替换为对应的值
3. 如果变量未定义或失效，则替换为 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. 变量解析流程

1. 解析 CSS 时，将变量存储在 customProperties 中
2. 渲染时，浏览器将 var(--var-name) 替换为对应的值
3. 如果变量未定义，则替换为 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 实现的动态样式管理机制。理解它的本质，才能真正发挥其价值。