Less中BEM修饰符易错位，因&代入完整父选择器导致空格；正确做法是用@block变量拼接或extract+replace提取块名，但需确保单选择器嵌套，且自动化核心在于团队命名共识而非语法技巧。
Less里用&嵌套时，BEM修饰符写法容易错位
直接在&后拼--modifier看似合理，但Less会把父选择器完整代入，导致生成.block .block--modifier（带空格），而非预期的.block--modifier。关键在于&默认代表“整个父选择器字符串”，不是仅类名前缀。
正确做法是显式截断父选择器层级：
- 用
&++或&+:无法解决，必须靠变量控制前缀 - 定义
@block: ~".block"，再用@{block}--modifier拼接，最稳妥 - 若坚持嵌套写法，需配合
&:not(&)等hack，但可读性差、维护成本高
用extract()和replace()从选择器中提取BEM块名
Less本身不提供selector-nest()之类API，但可用extract()配合replace()从&中剥离点号和空格——前提是父选择器结构固定。
例如：
.card {
@block-name: replace(extract(&, 1), ".", "");
&--hover { background: #eee; }
@{block-name}__header { font-size: 1.2em; }
}
注意：extract(&, 1)只取第一个选择器（如.card），若父级是.container .card，结果就是.container，直接崩。所以必须确保嵌套入口是单个BEM块选择器。
Miller (mlr) 是一个命令行工具，用于查询、整形和重新格式化名称索引数据，如 CSV、TSV、JSON 和 JSON Lines。它将 awk、sed、cut、join 和 sort 的功能整合到一个专为结构化数据处理而构建的单一工具中。
自动化BEM需要预定义命名规则，不能依赖运行时推导
Less是编译时处理，没有DOM上下文，所谓“自动”其实是“按约定生成”。真正可靠的路径是：人为定义@block变量 → 手动绑定到每个块 → 用字符串拼接生成子元素/修饰符。
-
@block必须是纯字符串（如"card"），避免~".card"混入CSS语法，否则@{block}__title会变成.card__title而非card__title - 修饰符建议统一用
@{block}--theme-dark，不用theme-dark单独变量，防止命名脱节 - 子元素层级超过两级（如
card__header__title）不推荐，BEM官方也不鼓励
与PostCSS插件（如postcss-bem）混用时的冲突点
如果项目同时用Less生成基础结构、PostCSS做BEM补全，要注意优先级顺序。Less编译出的.card--hover会被PostCSS当成已有类，可能跳过生成；而.card__header若Less里没写，PostCSS又没配ignore，就会重复输出。
实际调试时常见错误：
- PostCSS报
Unknown word：因为Less提前把@{block}__item编译成真实类名，PostCSS找不到原始占位符 - 最终CSS出现
.card.card--hover：Less嵌套+PostCSS双重处理导致类名叠加 - 解决方案：要么全交给Less（推荐小项目），要么全交给PostCSS（适合已有CSS体系）
BEM自动化真正的难点不在拼接语法，而在团队对块作用域边界的共识——同一个@block变量该不该跨文件共享？子元素类名是否允许被外部样式覆盖？这些决策比replace()函数调用重要得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
