padding: var(--padding) 无效的三大隐性断点：padding不继承、box-sizing为content-box导致溢出、变量作用域不匹配（如.card定义而:root重设）。
直接写 padding: 16px 就够用的场景，别硬套 --padding；但只要涉及深色模式、多端适配或用户可调主题，就必须用变量——否则改一处，漏三处，伪元素和动态插入节点全失效。
为什么 padding: var(--padding) 写了却没效果
不是语法错，是三个隐性断点同时触发：
-
padding不继承：父级设了--padding: 1rem，子元素没显式写padding: var(--padding)，那就等于没写 -
box-sizing还是默认的content-box：--padding: 16px一加，元素总宽 =width + 32px，布局当场溢出 - 变量作用域不匹配：定义在
.card里，媒体查询却在:root下重设，断点切换后值根本没更新
怎么定义 --padding 才算真正“可管理”
关键不在“有没有变量”，而在变量是否落在能被覆盖的作用域里：
- 全局默认值必须写在
:root：:root { --padding: 1rem; }，别只塞在某个组件选择器里 - 深色模式、移动端等分支，必须在同级作用域重定义：
.card.dark { --padding: 0.75rem; }，而不是指望:root里的值自动变 - 单位必须显式携带：
--padding: 1rem合法，--padding: 1无效；0.5rem易被四舍五入干扰，优先用0.75rem/1rem/1.25rem - 组件级变量优先于
:root：.modal { --padding: 24px; }比全局更可控，也避免污染其他组件
响应式中改 --padding 的安全写法
不是每个断点都重写一遍 padding，而是只更新变量值，复用同一套规则。但顺序和作用域极易翻车：
- 所有媒体查询里的变量重定义，统一写在
:root下，别分散到不同选择器里 - 避免顺序错乱：先写
@media (max-width: 768px)，再写@media (min-width: 769px)，后者若没加!important可能被前者覆盖（尤其变量在:root定义时） - 慎用
calc(var(--padding) * 1.2)：Safari 15.4 之前对calc嵌套var()支持不稳定，建议直接设新值，比如--padding: 1.25rem - 移动端常用
--padding: 0.75rem，PC 端用--padding: 1.25rem，差值需在:root中显式声明并验证
最常被忽略的是：JS 动态修改 --padding 时，必须带单位、选对作用域、节流，并确保 DOM 已挂载；而 padding: var(--padding) 必须显式写在目标选择器里——光改变量，不写引用，等于白改。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
