应使用语义化CSS变量（如--space-sm、--radius-card）替代硬编码像素值，定义在组件宿主或:root中，统一消费var()，避免!important、单位混杂及无意义编号命名。
用 --spacing-sm 这类变量代替写死的像素值
硬编码 margin: 8px 或 padding: 16px 会让组件一旦嵌入不同设计系统就难以适配。CSS 变量的核心价值是把「可变部分」提前声明为接口，而不是等使用者去改选择器内部样式。
实操建议：
- 在组件根元素（如
:host、.card或:root）上定义变量，例如：:root { --spacing-sm: 4px; --spacing-md: 12px; --radius-base: 6px; } - 组件内部统一用
var(--spacing-md)替代具体数值，包括gap、padding、border-radius等布局相关属性 - 避免在变量值里带单位以外的内容（比如不要写
--btn-height: calc(2.5rem + 2px)），这会让下游覆盖时难以预测结果
通过 !important 阻断变量继承链是反模式
有人发现子组件没响应父级设置的 --color-primary，就给变量声明加 !important——这会破坏层叠逻辑，让下游无法覆盖，等于把接口锁死了。
真正可控的做法：
立即学习“前端免费学习笔记（深入）”；
- 确保变量作用域合理：优先在组件宿主选择器上设值，而非全局
:root，避免污染其他组件 - 用
inherit显式传递：如果子组件需继承父组件变量，直接写color: var(--text-color, inherit)，别依赖隐式继承 - 检查计算时机：变量必须在使用前已定义，
@import顺序错乱或 CSS 模块加载异步都可能导致var()回退到 fallback 值
响应式配置要拆成独立变量，别塞进媒体查询里硬切
把 @media (min-width: 768px) { .card { --spacing-md: 20px; } } 写在组件内部，会导致变量不可复用、调试困难，且 SSR 时无法预判值。
更可持续的方式：
- 按断点分组定义变量，例如：
:root { --spacing-md: 12px; } @media (min-width: 768px) { :root { --spacing-md: 20px; } } - 组件只消费
var(--spacing-md)，不感知断点细节；换主题或换设备时只需改变量定义，不用动组件样式 - 如果组件自身需多套布局逻辑（如移动端堆叠、桌面端栅格），用
display: grid+grid-template-areas配合变量控制区域名，比反复写媒体查询更易维护
变量命名必须带语义，--size-1 这种编号方式撑不过两个迭代
当项目里出现 --size-1、--size-2、--size-3，没人能说清哪个对应按钮内边距、哪个是卡片圆角——这已经不是接口，是谜题。
命名原则很简单：
- 前缀标明用途：
--space-、--radius-、--z-、--color-，不混用 - 后缀说明层级或场景：
--space-section、--space-section-sm、--radius-card，而不是--space-2 - 避免缩写歧义：
--bg不如--color-bg明确；--md不如--size-md可读
变量越多，越要靠命名自解释。否则每次修改都要翻文档、查 Git 历史、试运行，实际成本远高于多打几个字符。
