CSS自定义属性应替代仅影响样式值的Modifier类名，如--color、--size；状态类名如--disabled仍需保留，变量须带命名空间前缀并在组件根节点声明，与BEM共存时严守“变量管值、类名管归属与状态”边界。
用 CSS 自定义属性替代重复的 Modifier 类名
当一个 Block 有多个视觉可变维度（颜色、尺寸、圆角、阴影等），硬写 button--theme-primary--size-lg--variant-outline 不仅冗长，还导致类名爆炸和维护成本飙升。CSS 变量能直接把“配置项”从类名里抽出来，让类名回归语义本质。
关键不是删掉修饰符，而是把那些只控制样式值的修饰符，换成变量驱动：
- 在 Block 根元素上设置变量，比如
.button { --button-color: var(--primary); --button-padding: 12px 24px; } - 用
data-属性或 JS 控制变量值：<button data-variant="outline">→ JS 动态设el.style.setProperty('--button-variant', 'outline') - 避免全塞进
:root，业务变量优先挂载到组件根节点，如.card { --card-shadow: 0 2px 8px rgba(0,0,0,.1); } - Safari 对
@keyframes中 CSS 变量的支持直到 iOS 15.4 才稳定，动画逻辑仍需保留部分类名兜底
什么时候该用变量而不是新增 Modifier
判断标准很简单：这个“变化”是否只影响样式值，且不改变结构、行为或语义？
- ✅ 适合变量：
--size、--color、--radius、--spacing—— 它们只是数值映射，JS 或构建时注入更可控 - ❌ 不适合变量：
--disabled、--loading、--active—— 这些是明确状态，必须靠类名开关，否则无法用:not(.button--disabled)等逻辑 - ⚠️ 混合场景：比如
button--size-lg可退化为button+style="--button-size: lg"，但前提是所有尺寸都由同一套变量体系管理，不能一边变量一边类名
如何避免变量滥用导致调试困难
变量不是万能胶，乱用反而让样式更难追踪。DevTools 里看到 style="--button-color: #007bff" 却不知道它从哪来，比看错类名还头疼。
立即学习“前端免费学习笔记（深入）”；
- 始终在组件根节点声明变量，不要跨块复用同名变量（比如
.input和.button都用--padding，但含义不同） - 变量名带命名空间前缀：
--button-padding而非--padding，防止被意外覆盖 - 禁止在 HTML 中硬编码
style属性传变量值，统一由 JS 或构建时注入，保证可追溯性 - 用
getComputedStyle(el).getPropertyValue('--button-color')在控制台快速验证当前值来源
和 BEM 共存的关键约束
变量不能取代 BEM 的结构语义，只能辅助修饰符瘦身。一旦破坏这个边界，类名会变得更不可读。
- 块名、元素名必须保留，
button__icon不能简化为icon—— 否则失去归属上下文 - 修饰符仍需存在，只是不再承担“值定义”职责：用
button--outline触发变量切换，而不是直接写死边框样式 - 禁止在
__元素上单独设变量，比如.button__icon { --icon-size: 16px }—— 元素样式应继承自块，或通过父级变量控制 - PostCSS 插件如
postcss-bem-linter仍要启用，它不会校验变量，但能守住 BEM 的命名骨架不塌
最常被忽略的是变量和类名的职责切割：变量管“值”，类名管“归属与状态”。混用两者看似省事，实则把调试线索切成碎片——你得同时查 JS 注入逻辑、CSS 变量定义、HTML data 属性、以及 DevTools 里的 computed style，比纯 BEM 还费劲。
