真正“可管理”的--padding需满足：全局默认值写在:root；分支样式在同级作用域重定义；单位必须显式携带；组件级变量优先于全局；媒体查询统一置于:root下；JS设置时须带单位、选对作用域、确保DOM已挂载。
为什么 padding: var(--padding) 写了却没生效
不是语法错了，而是三个隐性断点同时触发：
父元素定义了 --padding: 1rem，但子元素没显式写 padding: var(--padding) —— padding 不继承，不写就等于没设；box-sizing 还是默认的 content-box，--padding: 16px 一加，总宽直接溢出容器；
变量定义在 .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 的安全写法
所有媒体查询里的变量重定义，统一写在 :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，差值需人工验证，不能靠比例推算。
JS 动态修改 --padding 时最常踩的坑
调用 element.style.setProperty('--padding', '12px') 时，值必须带单位，'12' 会失效；
作用域选错：想改整个页面的 padding，却只对某个 div 调用 setProperty，结果只有它变；
DOM 未挂载就执行：在 DOMContentLoaded 之前操作，element 是 null；
高频触发没节流：比如从滑块实时拖拽改 padding，不加防抖会导致样式频繁重排；
逻辑属性兼容性：若用 padding-block-start: var(--pt)，旧版 Safari 可能回退为初始值，稳妥做法仍是 padding: var(--padding) 配合简写值。
立即学习“前端免费学习笔记（深入）”；
