Less 中直接写 .block__element--modifier 会出错，因其不支持 BEM 的双下划线和双连字符语义解析；&__element 编译后生成带空格的后代选择器而非连体类名，必须用 @{block}__element 显式拼接。
为什么直接写 .block__element--modifier 在 Less 里会出错？
Less 默认不支持双下划线 __ 和双连字符 -- 的嵌套展开逻辑。你写 .block { &__element { ... } } 看似合理，但实际编译后会变成 .block .block__element（多了一个空格），这不是 BEM 要的无空格类名，而是后代选择器——样式失效或意外覆盖就从这儿开始。
根本原因是 Less 的 & 符号在拼接时只做字符串连接，不识别 BEM 语义；它不会自动去掉空格或按约定补全分隔符。
实操建议：
- 必须显式用字符串拼接：用
@{block}变量 ++运算符构造完整类名 - 避免依赖
&__xxx这类“看起来像 BEM”的写法，它只是视觉欺骗 - 所有 BEM 块名应定义为变量（如
@block: "my-button"），便于复用和搜索替换
如何用 Less 变量 + 拼接写出可维护的 BEM 结构？
核心是把块名抽成变量，再用 ~"..." 或直接字符串插值生成真实类名。Less 3.5+ 支持 @{var} 在引号内插值，这是最稳妥的方式。
立即学习“前端免费学习笔记（深入）”；
示例（正确写法）：
@block: "c-card";
<code>@{block}</code> {
padding: 1rem;
<code>@{block}__header</code> {
font-weight: bold;
}
<code>@{block}__body</code> {
color: #333;
}
<code>@{block}__footer</code> {
text-align: right;
}
// 修饰符写法
&.<code>@{block}--compact</code> {
padding: 0.5rem;
}
}
注意：&.@{block}--compact 中的 & 是必需的，否则编译结果不是 .c-card--compact，而是独立的 .c-card--compact（脱离上下文）。
常见错误：
- 写成
.@{block}--compact（缺&）→ 生成顶层类，丢失嵌套关系 - 用
~".@{block}__header"→ 强制转义反而让 Less 不解析变量，输出字面量.@{block}__header - 在媒体查询里重复写
@{block}→ 应该把整个块包裹进@media，而非每个子选择器都拼一次
怎么处理 BEM 元素的多重修饰符组合？
BEM 允许 .block__element--modifier1--modifier2，但 Less 无法靠嵌套自动生成这种结构。硬拼字符串易错，且难以条件化。
推荐做法：用函数封装拼接逻辑（Less 3.1+ 支持带参数的混合宏）：
.bem-element(@block, @element, @modifiers...) {
<code>@{block}__@{element}</code> {
// 基础样式
// 遍历修饰符（Less 不支持原生 for，需手动展开）
.each-modifier(@modifiers) when (length(@modifiers) > 0) {
@mod: extract(@modifiers, 1);
<code>@{block}__@{element}--@{mod}</code> {
// 修饰符样式
}
.each-modifier(extract(@modifiers, 2+));
}
.each-modifier(@modifiers);
}
}
// 使用
.bem-element("c-button", "label", "primary", "large");
不过要注意：Less 没有真正的循环，上面的 .each-modifier 是模拟递归，实际项目中更常用的是明确列出常用组合（如 --primary、--disabled），避免过度抽象。
性能提示：每多一层混合宏调用，编译时间微增；BEM 类名本身已具语义，不必强求“完全动态生成”。手写几个高频组合更可控。
为什么 CSS Modules 或 scoped CSS 比 Less+BEM 更适合组件化？
Less 写 BEM 终究是人工约定+字符串拼接，容易漏拼、错拼、命名不一致。而现代方案如 Vue 的 <style scoped></style> 或 React 的 CSS Modules，能天然隔离类名，class="header" 就是 .MyComponent__header_abc123，无需手动写 __。
如果你还在用 Less，又需要强约束：
- 用 ESLint 插件
stylelint-selector-bem-pattern校验类名格式（需配合 PostCSS） - 把 BEM 规则写进团队文档，并用代码片段（snippets）固化常用结构，减少手误
- 警惕嵌套过深：Less 中三层以上 BEM 嵌套（如
@{b}__e--m @{b}__e__sub）会让编译输出冗长，也违背 BEM “扁平化”初衷
BEM 的本质是命名契约，不是语法糖。Less 做不到自动校验，真正难的从来不是怎么写，而是所有人坚持同一套拼写规则。
