不能用&在@mixin里拼接bem类名，因为&仅作编译时字符串拼接、不感知语义层级，如父选择器为.card.is-active时&__header会生成非法的.card.is-active__header；跨文件复用时上下文不可控，导致purgecss漏删、devtools难调试；无参@mixin无法支持命名空间或动态块名，违背bem可维护性原则。
为什么不能用 & 在 @mixin 里拼接 BEM 类名
因为 & 只是编译时字符串拼接，不感知语义层级。比如父选择器是 .card.is-active，你在里面写 &__header，结果就是 .card.is-active__header——这违反 BEM：修饰符 --active 必须直接挂载在块或元素上，不能“传染”给子元素。
更麻烦的是跨文件复用：@include button-base 被调用时若依赖 &，上下文完全不可控；同一个混入在 .form 和 .modal 下展开，产出的选择器完全不同，PurgeCSS 会漏删、DevTools 里也搜不到原始类名。
-
&不是 BEM 解析器，它只是把当前父选择器原样贴过去 - 无参
@mixin element看似省事，实则让块名隐式绑定，无法支持命名空间（如n-button）或动态变量（如$c-input） - 所有靠
&推导的修饰符嵌套（比如&__header { &--large { ... } }）都可能产出.block__header--large这种合法结构，但一旦加个条件类，立刻崩成.block.is-open__header--large
怎样设计一个真正可维护的 @mixin bem
核心是把 BEM 的三要素拆成显式参数和配置项，而不是靠嵌套猜上下文。必须传 $block，并隔离命名空间、分隔符等变量。
推荐在全局配置中统一定义：
$namespace: 'n'; $element-separator: '__'; $modifier-separator: '--'; $state-prefix: 'is-';
然后封装主混入：
@mixin bem($block) {
$B: $namespace + '-' + $block;
.#{$B} {
@content;
@mixin element($name) {
&__#{$name} { @content; }
}
@mixin modifier($name) {
&--#{$name} { @content; }
}
@mixin state($name) {
&.#{$state-prefix}#{$name} { @content; }
}
}
}
- 调用时必须显式传块名：
@include bem('button') { ... }，不接受@include bem无参形式 -
element()和modifier()只在bem()作用域内可用，避免污染全局 - 如果项目不用命名空间，
$namespace设为空字符串即可，不影响结构
实际使用时最容易踩的三个坑
不是语法写错，而是对 BEM 语义理解偏差导致的结构性问题。
- 在
@mixin bem('card')内部又嵌套@include bem('header')：这等于声明两个独立 Block，card__header就不该是另一个 Block 的根，而应是card的 Element —— 正确做法是@include element('header') - 用
modifier()描述尺寸或位置，比如@include modifier('top-left')：BEM 修饰符只表达状态（--disabled、--expanded）或有限变体（--primary），尺寸应由 CSS 变量或独立工具类控制 - 把
@mixin bem当作类名生成器，在 JS 层调用它拼字符串：#{bem('button', 'icon')}：这破坏静态分析，PurgeCSS 无法识别，Lightning CSS 会跳过优化，且 IDE 无法跳转到对应样式
框架项目中怎么安全落地
React/Vue 里不要在模板硬写 class="button__icon"，也不要在 Sass 里用 @mixin 去“生成”类名字符串。
正确路径是：组件内定义常量 BLOCK = 'user-avatar' → 模板用 clsx 组合类名 → Sass 中只用 @include bem(BLOCK) 定义样式逻辑。
- JSX 中写
className={clsx(`${BLOCK}__image`, { [`${BLOCK}__image--loading`]: isLoading })}，确保所有类名都来自同一来源 - Sass 中
@include bem($c-user-avatar)（其中$c-user-avatar是变量）依然可行，但前提是该变量在组件级 scope 内定义，不跨组件共享 - 禁用任何
@extend跨 Block 复用，哪怕.button--small和.input--small样式相同，也必须各自定义 —— BEM 的边界就是模块边界，不是视觉边界
最常被忽略的一点：每次加新类名前，得确认它脱离当前文件后，别人是否能单凭类名反推归属和作用。这不是技术问题，是协作契约。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
