CSS变量存储多层box-shadow等多值属性时必须用引号包裹整个值，否则解析器会截断；使用时需配合var()且设fallback，不可用于calc()或content属性中直接渲染Base64等内容。
box-shadow 多层值必须加引号才能存进 CSS 变量
直接写 --shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.2); 会失效——浏览器只取逗号前半截，后半被静默丢弃。这是因为 CSS 变量把整个右侧当字符串存储，但没引号时，解析器在遇到第一个空格就停了。
正确做法是加双引号或单引号包裹整个值：
:root {
--shadow-card: "0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.2)";
}
使用时不能省略 var()：
.card { box-shadow: var(--shadow-card); }
- 引号内每层之间必须是英文逗号 + 一个空格：
,，多空格或无空格都会让整条声明无效 - 务必加 fallback：
box-shadow: var(--shadow-card, 0 2px 4px rgba(0,0,0,.1));，避免变量未定义时阴影消失 - 别用
calc()包裹var(--shadow-card)——calc()不接受带逗号的字符串，会报错
content 属性里用变量存中文/带空格文本要避开外层引号
--tip: "请稍候..."; 看似合理，实际存的是带双引号的字符串 "请稍候..."，而 content: var(--tip) 会展开成 content: "请稍候...";，语法非法，直接不渲染。
正确写法是去掉变量定义时的外层引号：
:root {
--tip: 请稍候...
--quote: "他说："今天真好""
--emoji: ? 完成
}
调用时保持原样：
.status::after { content: var(--tip); }
.quote::before { content: var(--quote); }
- 含双引号的内容，内部用
"转义；含单引号，用'转义 - 连续空格会被 CSS 合并为一个，如需保留，改用
\00a0） - Base64 字符串不能靠
var()在content中解码渲染，content: var(--icon)只输出字面量，图片不会出现
padding/margin 这类多值属性不能靠单个变量“一键展开”
写 --pad: 16px 24px 8px; 再用 padding: var(--pad); 是无效的——浏览器把展开后的 16px 24px 8px 当作一个非法标识符，不是三个合法长度值，结果 padding 显示为 invalid 或直接忽略。
必须拆成多个语义变量，再在属性中显式拼接：
:root {
--pad-y: 16px;
--pad-x: 24px;
--pad-top: 8px;
--pad-right: 24px;
--pad-bottom: 12px;
--pad-left: 24px;
}
<p>.card {
padding: var(--pad-top) var(--pad-right) var(--pad-bottom) var(--pad-left);
/<em> 或简写 </em>/
margin: var(--pad-y) var(--pad-x);
}</p>
- 别用
--pad-16-24-8这类数值命名，改天数值变了变量名就失效 -
calc()可以嵌套var()，比如margin: calc(var(--pad-y) * 2);是合法的 - DevTools 的 Computed 面板里如果看到
padding值是灰色或标invalid，基本就是这个原因
属性选择器匹配含空格的 data-* 值必须加引号
[data-role=modal dialog] 看起来直觉，但浏览器把它拆成两个选择器：[data-role=modal] 和 dialog，后者可能意外匹配 标签，完全失焦。
全值匹配必须加引号：
[data-role="modal dialog"] { color: red; }
[data-status='loading error'] { opacity: 0.6; }
如果目标是匹配空格分隔的某个词（比如 class 或自定义多值属性），用 ~=：
[class~="btn"] /* 匹配 class="btn"、"btn primary" */ [data-tags~="vue"] /* 匹配 data-tags="react vue svelte" */
-
*=是子串匹配，[data-role*="modal"]会误中"remodal"或"modal-dialog"，慎用 - 引号类型（单/双）在 JS 动态设置 style 时要注意转义，比如 JS 里写
el.style.cssText = '[data-role="modal dialog"]'得处理好嵌套 - 所有这类匹配默认大小写敏感，建议 HTML 属性值统一小写，避免遗漏
CSS 变量本质是字符串容器，它不解析语法、不识别空格分隔、不执行引号自动剥离——你存什么，它就原样吐什么。最容易翻车的点，恰恰是那些「看起来应该能行」的地方：引号套引号、空格当分隔、多值当整体。动手前先想清楚：这里到底需要字符串拼接，还是值解析？
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
