CSS专题之自定义属性

发布于：2025-05-12 ⋅ 阅读:(14) ⋅ 点赞:(0)

前言

石匠敲击石头的第 12 次

CSS 自定义属性是现代 CSS 的一个强大特性，可以说是前端开发需知、必会的知识点，本篇文章就来好好梳理一下，如果哪里写的有问题欢迎指出。

什么是 CSS 自定义属性

CSS 自定义属性英文全称是 CSS Custom Properties，简称自定义属性，也被称为 CSS 变量，是允许开发者样式表中定义和重复使用值的一种机制，类似于其它编程语言（如 JavaScript 等）中的变量。

为什么需要 CSS 自定义属性

CSS 语言是一种声明式语言，不像其它语言有变量、条件和逻辑等特性，导致在维护、复用、动态控制方面存在不少局限。

正因如此，社区中诞生了各种 CSS 预处理器，如 Sass（Scss）、Less、Stylus 等。它们通过引入变量、运算、条件语句等机制，弥补了原生 CSS 的不足，大大提高了样式开发的效率与可维护性。

其中，变量功能尤其重要，它让我们可以在多个地方复用相同的值，一旦需要修改，只需改一处，大幅降低了维护成本，但预处理器的变量是在编译阶段生效的，无法在浏览器中运行时动态更新，也不能与 DOM 或 JavaScript 交互。

为了解决这一问题，CSS 自定义属性应运而生。

基础语法

变量声明

CSS 变量的声明由 -- 开头，便于浏览器区分自定义属性和原生属性。

.box {
  --color: red;
  color: red;
}

上述代码中 color 是原生属性，--color 则是自定义属性。

自定义属性支持各种值。

:root {
  --link: 'link';
  --color: #f00;
  --back-ground: red;
  --height: 68px;
  --padding: 10px 20px;
  --line-height: 1.5;
  --transition-duration: 0.5s;
  --margin-top: calc(2vh + 20px);
}

⚠️ 注意：

  • 变量名命名规则比较松散，可以是任何有效的字符，比如：中文、大写字母、驼峰命名、中距线、emoji 和 HTML实体 等

    :root {
  --COLOR: #f00;
  --color: #f00;
  --内边距: 10px;
  --backGround: red;
  --calc: 10px;
  --🤪: '哈哈哈';
  --©: '版权';
}

  • 变量名大小写敏感，--color 和 --COLOR 是两个不同的变量

  • 变量是和选择器是强绑定的，只能在声明块或者元素的内联样式中声明变量

    --color: red; /* 无效声明 */

:root {
  --color: red; /* 有效声明 */
}

    <!-- 在元素的内联样式中声明变量 -->
<div style="--color: red;">文字</div>

    ⚠️ 注意： 在元素的内联样式中声明自定义属性可以通过 JavaScript 动态控制。

变量使用

通过使用 var() 函数来使用变量。

.box {
  color: var(--color);
}

var() 函数可以接受两个值，第一个值是 CSS 自定义属性，第二个值是一个回退值，回退值在第一个值（CSS 自定义属性）无效时保证 var() 函数有值。

.box {
  color: var(--color, #fff);
}

上述代码中如果 --color 不存在，则使用回退值 #fff。

⚠️ 注意：

  • var() 函数第二个参数不处理内部的逗号或空格，都视为参数的一部分

    .box {
  padding: var(--pad, 10px 15px 20px);
}

  • 变量值只能用作属性值，不能用作属性名

    .box {
  var(--margin): 20px; /* 无效 */
}

  • 如果变量值是字符串，可以与其它字符串拼接

    .box {
  --string: 'hello';
  --string2: var(--string)' world';
}

  • 如果变量值是数值，不能与数值单位拼接使用

    .box {
  --height: 20;
  height: var(--height)px; /* 无效 */
}

    必须使用 calc() 函数将它们连接起来。

    .box {
  --height: 20;
  height: calc(var(--height) * 1px); /* 有效 */
}

  • 如果变量值带单位，则不能写成字符串

    /* 无效 */
.box {
  --height: '20px';
  height: var(--height); 
}

/* 有效 */
.box {
  --height: 20px;
  height: var(--height); 
}

  • 如果变量值对于 CSS 属性来说是一个无效值时，会做降级处理

    .box {
  --height: 20px;
  color: var(--height);
}

    上述代码中，color 属性不支持 20px，会被降级为 initial（在 Chrome 浏览器中是一个 #000 的颜色值），如果 var() 函数中有第二个参数，并且第二个参数值是有效值，则降级为第二个参数值。

    .box {
  --height: 20px;
  color: var(--height, red); /* 等同于 color: red; */ 
}

  • CSS 变量不能循环使用

    :root {
  --color: red;
  --color: var(--red); /* 无效 */
}

.box {
  /* 降级为 initial，在 Chrome 浏览器中等同于 color: #000; */
  color: var(--color); 
}

    上述代码中，在同一个选择器块内重复声明了 --color，后者把前者覆盖，所以引用的是自身。

变量作用域

同一个 CSS 变量，可以在多个不同的选择器中声明，读取的时候依照层叠优先级规则判断的流程，关于这块知识点具体的内容，可以看我之前写的这篇文章。

在这里插入图片描述

举个例子

<style>
  :root {
    --color: blue;
  }
  
  div { 
    --color: green; 
  }
  
  #alert { 
    --color: red;
  }
  
  * { 
    color: var(--color); 
  }
</style>

<p>蓝色</p>
<div>绿色</div>
<div id="alert">红色</div>

在这个示例中，--color 变量被分别定义在 :root、div、#alert 这三个不同的选择器中。由于 CSS 遵循**“就近优先”** 的规则，每个元素会使用作用于自己最近的变量定义，因此三段文字最终呈现出不同的颜色。

由此可见，CSS 变量的作用域就是它所定义的选择器的作用范围。具体来说：

  • :root 选择器中的 --color 定义在 <html> 元素上，会被其所有后代元素继承（除非被更具体的选择器覆盖），适合定义全局变量
  • p 选择器中的 --color 只影响 <p> 元素及其后代
  • .class 选择器中的 --color 仅作用于类名为 .class 的元素及其后代
  • #id 选择器中的 --color 只作用于指定 id 的元素及其后代

之所以变量能传递到后代，是因为 CSS 自定义属性是支持继承的，这点类似 color、font-family 等属性。如果你对继承机制感兴趣，可以参考我写过的另一篇文章。

在 @ 规则中的使用

CSS 自定义属性支持 @media、@keyframes 等规则中使用。

.box {
  --color: red;
  --background: green;
  --from-color: red;
  --to-color: lime;
  animation: animation 1s infinite;
}

/* 在 @media 中使用 */
@media screen and (min-width: 768px) {
  .box {
    --color: black;
    --background: #fff;
  }
}

/* 在 @keyframes 中使用 */
@keyframes animation {
  from {
    background-color: var(--from-color);
  }
  
  to {
    background-color: var(--to-color);
  }
}

⚠️ 注意： CSS 自定义属性（变量）不能用于媒体查询或选择器中，包括像 :nth-child() 这样的结构性伪类选择器。

:root {
  --num: 2;
  --breakpoint: 30em;
}

div:nth-child(var(--num)) { /* 无效：变量不能用于选择器中 */
  color: var(--color)
}

@media screen and (min-width: var(--breakpoint)) { /* 无效：变量不能用于媒体查询 */
  :root {
    --color: green;
  }
}

兼容性处理

CSS 自定义属性在现代浏览器中已经有了较好的支持，具体可以参考CSS Variables (Custom Properties)。

在这里插入图片描述

对于不支持的浏览器，可以使用下面的写法。

:root {
  --primary-color: #f00;
}

.box {
  color: #f00; /* 回退值 */
  color: var(--primary-color); /* 优先使用变量 */
}

也可以使用 @support 进行特性检测。

:root {
  --primary-color: #f00;
}

/* 支持 CSS 变量 */
@supports (--primary-color: #f00) {
  .box {
    color: var(--primary-color);
  }
}

/* 不支持，执行降级处理 */
@supports not (--primary-color: #f00) {
  .box {
    color: #f00;
  }
}

也可以通过 JavaScript 来检测浏览器是否支持 CSS 变量。

const isSupported =
  window.CSS &&
  window.CSS.supports &&
  window.CSS.supports('--primary-color', #f00);

if (isSupported) {
  // 支持 CSS 变量，执行相关逻辑
} else {
  // 不支持，执行降级处理 
}

⚠️ 注意： 如果你的项目使用构建工具，推荐使用 postcss-custom-properties 插件，自动将 CSS 变量编译为静态值，生成兼容所有浏览器的 CSS。

使用 JavaScript 操作变量

CSS 自定义属性和其它 CSS 属性一样，可以通过 CSSOM 中的一些 API 来操作：

  • 从内联样式中读取变量

    document.body.style.getPropertyValue('--color').trim();

  • 将变量设置在内联样式中

    document.body.style.setProperty('--color', '#f00');

  • 从计算样式中获取变量（包含继承和外部样式）

    window.getComputedStyle(document.body).getPropertyValue('--color').trim();

CSS 变量和 CSS 预处理器变量的对比

从表面上看，CSS 自定义属性和 CSS 预处理器中的变量有点类似，但事实上它们之间有很大的差别，以下是两者的对比。

特性 CSS 变量 (--color) CSS 预处理器变量（如 $color）
语法标准 原生 CSS 标准，受 W3C 支持 编译时语法，不属于 CSS 标准
运行时机 运行时，浏览器解析样式时生效 编译时，在构建阶段由工具转换成静态值
作用域 作用于DOM 结构，遵循层叠和继承规则 作用于代码结构（嵌套/模块），无层叠概念
是否可以被 JS 操作 ✅ 可以动态读取和修改 ❌ 不行，编译后变量信息已不存在
是否可以继承 ✅ 可以被继承（像 color 一样） ❌ 不具备继承机制
是否可用于媒体查询等结构中 ❌ 不行，不能用于选择器、媒体查询等 ✅ 可以在任何位置使用，包括条件、循环等
动态响应能力 ✅ 可以根据状态变化（如主题切换）实时生效 ❌ 编译时决定，无法响应 DOM 或用户交互
使用场景 主题切换、暗黑模式、组件 API、动态样式等 提高样式可维护性、模块化组织、函数/循环等

实践建议

  1. 使用命名规范区分变量作用域

    • 全局作用域变量：使用大写字母命名
    • 局部作用域变量：使用小写字母命名
    :root {
  --PRIMARY-COLOR: #f00; /* 全局变量 */
}

.box {
  --color: #fff; /* 局部变量 */
  --button-primary: var(--PRIMARY-COLOR);
}

    这样做有助于在开发时区分变量的来源。

  2. 避免直接重写全局变量，优先使用中间变量扩展

    :root {
  --PRIMARY-COLOR: #f00;
}

.box {
   --PRIMARY-COLOR: green;
  background-color: var(--PRIMARY-COLOR);
}

    上述代码，语法上是对的，但是会有以下几个问题：

    • 破坏变量体系的一致性： 你在 .box 中重写了 --PRIMARY-COLOR，导致它的含义发生改变，这种“同名变量局部重写”非常容易引起维护混乱
    • 主题切换时不可控：如果你有个切换主题的机制想要统一更新 --PRIMARY-COLOR，这个 .box 里的值就会 “失控”，不会随主题变化
    • 变量来源不清晰：团队协作时别人看到 --PRIMARY-COLOR 可能以为是全局值，其实是局部覆盖，容易出问题

    建议是通过中间变量（注入点）扩展全局变量。

    :root {
  --PRIMARY-COLOR: var(--user-color, #f00);
}

.box {
  --user-color: green;
  background-color: var(--PRIMARY-COLOR);
}

    这样做有以下几个好处：

    • 统一变量入口： 所有使用 --PRIMARY-COLOR 的地方都遵循同一套逻辑
    • 主题切换友好： 只要全局改了 --user-color，所有地方都会同步响应
    • 变量继承清晰： 任何定制化都是通过“注入”变量完成的，结构清晰、可控

  3. 将变量声明和 CSS 属性声明分开

    例如下面这段代码

    <button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-danger">Danger</button>

    btn 是按钮基本类名，btn-primary 和 btn-danger 是扩展类名

    在这里插入图片描述

    我们对比两个扩展类名，可以发现不同的风格的按钮具有相同的 CSS 属性，只是值不同。

    这时最好的方式就是使用 CSS 变量将值抽离出来。

    .btn {
  /* 其它基础样式... */
  color: var(--color);
  background-color: var(--background-color);
  border: 1px solid var(--border-color);
}

    将扩展类名调整为 CSS 变量，这样在改变按钮风格的时候就简便很多。

    在这里插入图片描述

总结

  • CSS 变量是一种允许在样式表中定义和复用值的机制，类似于编程语言中的变量
  • 相较于预处理器变量，CSS 变量支持运行时更新，可与 DOM 和 JavaScript 动态交互，更适合构建灵活的 UI
  • 变量遵循作用域和继承规则，可实现主题切换、组件自定义等需求
  • 建议使用统一命名规范，避免直接覆盖全局变量，优先通过中间变量扩展
  • 将变量声明与样式声明分离，有助于提升样式复用性和可维护性

参考文章

博客地址：https://github.com/wjw020206/blog

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布