BEM结构不能靠预处理器自动推导，&__xxx会生成后代选择器违背扁平化原则；正确做法是@at-root #{&}__xxx或变量插值，配合工具链校验与编辑器支持。
不能靠预处理器“自动推导”BEM结构，所有看似自动的拼接（如&__title）默认产出的是带空格的后代选择器，直接违背BEM扁平化原则；真正可用的自动化，只有显式提级+插值或工具链配合。
SCSS里&__content为什么编译出错？
它不是bug，是SCSS嵌套机制的固有行为：&代表完整父选择器字符串，&__content只是简单拼接，空格被保留，结果是.card .card__content（后代选择器），而BEM要求.card__content（单类名）。
常见翻车场景：
-
.card { .header { &__title {} } }→.card .header__title，完全偏离语义 -
.card { &:hover { &__body {} } }→.card:hover .card__body，既违反扁平原则，又增加权重 - 父选择器含空格时（如
.sidebar .widget），&__item会生成.sidebar .widget__item，但BEM只认.widget__item
正确做法：用@at-root #{&}__title强制提级
必须跳出嵌套上下文，在CSS根层级生成目标类名。核心是#{&}取当前块名（不含空格），再拼接__或--。
立即学习“前端免费学习笔记（深入）”；
Miller CSV TSV JSON 数据处理器
下载
Miller (mlr) 是一个命令行工具，用于查询、整形和重新格式化名称索引数据，如 CSV、TSV、JSON 和 JSON Lines。它将 awk、sed、cut、join 和 sort 的功能整合到一个专为结构化数据处理而构建的单一工具中。
实操要点：
-
$block: "button"; @at-root #{$block}__icon { }→.button__icon - 修饰符同理：
@at-root #{&}--disabled→.button--disabled - 禁止在
&:focus或&[disabled]内部再用&__xxx，否则产出.button:focus__icon这类非法名 - 所有
__和--必须与块同级，不能嵌套进子容器、媒体查询或伪类块内
Less中无法靠&安全拼接，得用@block变量
Less的&同样代入完整父选择器，&--modifier会产出.block .block--modifier。唯一稳妥路径是显式定义块前缀变量。
推荐写法：
- 定义
@block: "card"（纯字符串，不用~".card"），再写.@{block}__header→.card__header - 若坚持嵌套写法，
extract(&, 1)可取第一个选择器，但前提是父级必须是单个BEM块（如.card）；若为.container .card，extract会取到.container直接崩 - 修饰符统一用
@{block}--theme-dark，避免单独定义@theme变量导致命名脱节
真正值得投入的自动化：编辑器+校验+构建链路
预处理器层面的“自动拼接”极易出错且难调试；更可靠的是工具链协同：
- VS Code启用
emmet.bem，输入.btn__text直接生成<div class="btn__text"></div>，天然匹配BEM HTML结构 - 用
stylelint-selector-bem-pattern严格校验，配置ignoreSelectors排除:hover等伪类，禁用--fix防止误删.sr-only等工具类 - CI中跑
grep -r "\.[a-zA-Z]\+" src/css/ |快速发现非BEM类名
BEM真正的复杂点不在怎么写，而在“谁来保证每次都在正确上下文里用@at-root”，一旦漏掉，就悄悄退化成后代选择器——这种错误在DevTools里不报错，但会在组件复用时突然爆发。
