CSS自定义属性必须声明在选择器内（如:root或.class），不可裸写；使用时必须通过var(--name, fallback)调用，fallback为必需防错值，否则未定义时将回退至属性初始值引发渲染异常。
必须写在选择器里，不能裸写；必须用 var() 调用，不能直接当值用。
声明自定义属性必须挂载到选择器作用域内
CSS 自定义属性不是“全局变量”，而是带作用域的 CSS 属性。浏览器会忽略所有未包裹在选择器内的 --primary-color: #007bff; 声明——哪怕它出现在 <style> 标签最顶部。
-
:root是最常用也最安全的作用域，等价于 HTML 元素，所有后代都能继承 - 组件级隔离时，应写成
.my-card { --gap: 1rem; }，而非:root { --card-gap: 1rem; } - Blazor 的
.razor.css文件中，:root声明会逃逸出组件范围，必须改用带[b-xxx]属性的选择器（如div[b-abc123] { --size: 16px; }） - Vue/Svelte 的
<style scoped>不影响自定义属性继承链，但若父组件没声明--x，子组件var(--x)就是unset
使用 var() 时必须提供 fallback 值防首屏错乱
var(--color) 在变量未定义时不会报错，而是回退到该 CSS 属性的初始值：color 回退为 inherit，background-color 回退为 transparent，border 可能整条失效——这正是首屏“文字消失”“按钮透明”的根源。
- 关键写法是
color: var(--text-default, #333);，fallback 必须是合法 CSS 值 - fallback 不是“兜底显示”，而是参与样式级联计算的真实值；一旦生效，就和硬编码无异
- 不要依赖 JS 后续注入：DOMContentLoaded 之后调用
el.style.setProperty('--x', 'red')改不了已渲染结果 - 媒体查询或
@supports内部定义的变量，若规则未触发，变量即不可见，var(--x)仍会 fallback
IE11 兼容必须用 postcss-custom-properties + preserve: false
IE11 完全不识别 var(--x) 语法，遇到就静默丢弃整条声明，不是降级，是样式丢失。比如 border: 1px solid var(--red); 在 IE 里等于没写这条 border。
立即学习“前端免费学习笔记（深入）”；
- PostCSS 插件必须显式配置
preserve: false，否则默认生成两行：color: #007bff;和color: var(--c);，IE 仍跳过第二行 - 变量只能定义在
:root，且值必须是纯常量（不能含calc()、嵌套var()或函数表达式） - 避免在复合属性中混用：
background: var(--bg) url(img.png)会让 IE 整条 background 失效 - 若同时引入
css-vars-ponyfill，就不能配preserve: false，否则 ponyfill 找不到原始var()无法工作
最容易被忽略的是：变量是否在首个 var() 使用前、同一次 CSS 解析周期内完成定义。加载顺序、作用域链断裂、fallback 缺失——三者任一出问题，视觉异常就不是“可能”，而是“必然”。
