BEM本身不压缩CSS，但滥用修饰符（如button--size-sm、button--color-blue）会导致碎片化规则堆积，使文件体积额外增加12%～18%；正确做法是限定修饰符为语义明确的有限组合（如button--primary），并配合PurgeCSS静态分析删除未用类名。
为什么BEM本身不压缩CSS，但会让文件变大
BEM 不是压缩工具，它只规定命名结构。如果你写 button--size-sm、button--size-md、button--size-lg、button--color-red、button--color-blue……每个都对应一条独立 CSS 规则，那最终打包出来的 CSS 就是一堆碎片声明。Spotify 工程团队实测，这类滥用会让 CSS 体积额外增加 12%～18%。
常见错误现象：.button--size-sm { padding: 4px 8px; } 和 .button--size-md { padding: 8px 16px; } 实际只是数值不同，却生成两条规则；而传统写法里 .button.size-sm 和 .button.size-md 同样冗余——关键不在写法，而在是否把像素级差异当成语义变体。
- 真正该用修饰符的场景只有有限组合：比如
button--primary、button--disabled、input--error - 禁止一义多职类名，如
button--primary-margin-left-20，PurgeCSS 无法识别其使用上下文 -
button--disabled必须和button同时出现，否则构建工具无法推断依赖关系，tree-shaking 失效
怎么让 PurgeCSS 精准删掉没用的 BEM 修饰符
PurgeCSS 不认 BEM，只认字符串。它扫描所有 className 或 class 属性中出现的完整类名，匹配不到就删。BEM 的价值在于提供可预测的命名模式（block__elem--mod），让它敢删、能删准。
常见失效原因：
立即学习“前端免费学习笔记（深入）”；
-
class="card__item--${status}"这种模板字符串拼接，PurgeCSS 默认看不到运行时生成的类名 - 第三方组件没显式写 class：
<van-button></van-button>→ 必须改成<van-button class="van-button"></van-button> - 配置漏掉
keyframes: true，导致toast--animate-in这类动画修饰符被误删 -
content路径没覆盖所有 JSX/Vue 模板文件，比如漏了src/pages/**/*.{tsx,vue}
用 CSS 自定义属性替代修饰符的实操边界
当修饰符实际只控制颜色、间距、圆角等可变量时，硬写类名等于把配置逻辑重复塞进 HTML。CSS 自定义属性能把这部分抽离到样式层，HTML 回归语义本质。
例如把 button--theme-primary--size-xl--variant-outline 缩减为 button，然后在 CSS 中定义：
.button {
padding: var(--button-padding, 0.5rem 1rem);
background-color: var(--button-bg, #007bff);
border-radius: var(--button-radius, 0.25rem);
}
关键点：
- 变量必须由 JS 或构建时注入（如通过
data-属性 +element.style.setProperty()） - 优先在 Block 根元素上设变量，而非
:root，避免业务变量污染全局作用域 - 禁止泛滥定义
--button-hover-bg-color、--button-disabled-bg-color这类变量，应由 Block 统一管理状态映射 - Safari 对 CSS 变量在
@keyframes中的支持较晚，若需兼容旧版动画，仍得保留部分类名
如何防止 JS 层面引入冗余 BEM 类名
手动拼 className={`${block}__${elem}--${mod}`} 容易漏空格、错分隔符，导致渲染出无效类名（如 button__icon--），最后只能靠多写 CSS 兜底——这反而增大体积。
推荐做法：
- 每个组件顶部定义常量：
const BLOCK = 'user-avatar'，所有类名基于它生成，不拼接动态块名 - 用
clsx封装：clsx(`${BLOCK}`, `${BLOCK}__image`, mod && `${BLOCK}__image--${mod}`) - 禁止在
useEffect或 API 回调里动态注入类名字符串——这类行为会让 PurgeCSS 彻底失效 - JSX 中所有类名必须静态可分析，比如
{isLoaded ? styles['card--loaded'] : ''}可识别，styles[`${base}--${state}`]不可识别
最常被忽略的一点：HTML 类名长度问题，90% 出现在「页面容器」和「功能组件」职责混淆时。缩写类名（如 uc-avt--l）治标不治本，调试时根本看不出它在干啥——根因是组件边界没划清，不是命名太长。
