css自定义属性是以–开头的原生css变量，需在选择器内声明（如:root），区分大小写、支持级联继承；使用var()读取并可设fallback，适用于主题切换、响应式、间距系统等，但不能用于选择器名、属性名、@import等场景。
什么是CSS自定义属性（CSS Custom Properties）
CSS自定义属性就是以 -- 开头的变量，比如 --primary-color，它不是预处理器变量，而是原生 CSS 运行时生效的机制。它必须声明在 CSS 选择器的声明块中（最常见的是 :root），且区分大小写、支持级联和继承。
怎么声明和使用自定义属性才不会失效
声明位置错误是新手最常见的问题：不能写在媒体查询外层、不能脱离选择器作用域、不能用在 @keyframes 内直接赋值动画属性。正确做法是：
- 全局变量统一放在
:root里，如:root { --spacing-xs: 4px; } - 组件级变量可写在组件选择器内，如
.card { --shadow: 0 2px 8px rgba(0,0,0,0.1); } - 读取时必须用
var(--spacing-xs)，不能直接写--spacing-xs - 支持 fallback：
var(--color, #007bff)，当变量未定义时回退到默认值
为什么用 var() 替代重复颜色/尺寸值更安全
直接替换硬编码值看似简单，但容易漏改、错改、跨文件不一致。而自定义属性配合 var() 能做到一处修改、全站响应，且浏览器会校验语法——如果 --bg 拼错成 --bkg，var(--bkg, white) 会安静地 fallback，不会导致样式崩溃。
典型场景包括：
立即学习“前端免费学习笔记（深入）”；
- 主题色切换：
:root { --text-primary: #333; } body.dark { --text-primary: #eee; } - 响应式断点：
:root { --breakpoint-md: 768px; } @media (min-width: var(--breakpoint-md)) { ... } - 间距系统：
padding: var(--spacing-sm) var(--spacing-md);
哪些地方不能用自定义属性，容易踩坑
自定义属性不是万能的，它不能用于以下场景：
- 选择器名称本身，比如不能写
var(--class-name) { ... } - 属性名本身，比如不能写
var(--prop): value; -
@import或@font-face的 URL 中（需 js 注入或构建时处理） - 伪元素的
content中若含引号或特殊字符，需注意转义，例如content: var(--label, "default");必须带双引号 - IE 完全不支持，如需兼容，得用 postcss 插件降级或搭配 CSS-in-JS 方案
最常被忽略的一点：自定义属性的值是字符串，即使写 --size: 16px，它也不是数值类型，所以不能直接参与 calc(100% - var(--size)) 这类运算——但其实可以，只要单位匹配；真正出错的是写成 calc(100% - var(--size, 16))（缺单位）。