Less中&符号需完整复用父选择器链，BEM中应确保Block顶层类名扁平独立，避免嵌套导致选择器膨胀或语义断裂，严格遵循__element和--modifier命名层级。
Less中&符号如何正确匹配BEM的Block层级
Less的&（Parent selector）不是简单地拼接字符串，而是**完整复用父选择器链**。在BEM中，这意味着&会带上整个外层结构，比如.header或.card，而不是只取类名片段。
常见错误是写成：
.card {
&__title { font-size: 1.2em; }
&--highlighted { border: 2px solid #007bff; }
}看起来没问题，但一旦.card被嵌套（如.section .card），生成的CSS就会变成.section .card__title——这违反BEM“Block独立性”原则，因为__title本应只依赖.card自身。
- 确保Block顶层类名不被意外包裹：把BEM Block定义放在最外层作用域，避免在其他选择器内部写
.block { ... } - 若必须嵌套（如主题切换），用
&.block显式切断继承链：.theme-dark { &.card { // ← 关键：&.card 不会生成 .theme-dark .card &__title { color: white; } } } - 不要滥用
&生成多层修饰符，例如&__item &__item--active会产生冗余且非BEM语义的选择器
用&组合Element和Modifier时的命名约束
BEM要求Element（__）必须隶属于Block，Modifier（--）必须依附于Block或Element。Less的&能自然支持这种隶属关系，但需严格遵循命名顺序。
正确写法是先定义Block，再用&__xxx和&--xxx展开：
.button {
display: inline-flex;
&__icon { margin-right: 0.5em; }
&--large { padding: 0.75em 1.5em; }
&--large&__icon { width: 1.2em; } // ❌ 错误：Element Modifier不是标准BEM
}
-
&--large&__icon生成的是.button--large.button__icon，它混合了Block Modifier和Element，语义断裂——图标尺寸应由.button__icon--large控制 - Element Modifier必须基于Element定义：
&__icon { width: 1em; &--large { width: 1.2em; } } - 多个Modifier组合（如
.button--primary--large）不推荐，BEM官方建议用单Modifier + 原子类或JS控制状态
避免&导致CSS重复和 specificity 爆炸
Less的&会在编译时复制整个父选择器路径，如果Block本身已带高权重（如#app .layout .sidebar .menu），每个&__item都会继承全部前缀，最终CSS体积膨胀、浏览器匹配变慢。
典型症状：DevTools里看到#app .layout .sidebar .menu__item这样的超长选择器，且样式覆盖困难。
立即学习“前端免费学习笔记（深入）”；
- 始终让Block类名保持“扁平”：直接用
.menu，而非.sidebar-menu或div.menu - 禁用标签选择器参与BEM：不要写
nav.menu { &__item { ... } }，改用.menu { &__item { ... } } - 用
!important是信号灯：一旦需要它来覆盖&生成的样式，说明选择器结构已失控 - 构建时可加PostCSS插件（如
postcss-bem-linter）校验输出是否符合BEM规则
与CSS Modules或现代CSS方案共存时的&取舍
当项目同时用Less和CSS Modules（或:global混用），&的“透传性”反而会破坏局部作用域。例如：
.card {
composes: theme from './base.module.css';
&__title { composes: heading from './typography.module.css'; }
}此时&__title会被CSS Modules处理两次（Less生成类名 + Modules哈希），结果不可控。
- 纯Less项目：放心用
&，它是BEM书写效率的核心 - Less + CSS Modules：放弃
&用于跨模块组合，改用普通类名+composes声明，把BEM逻辑交给JSX或模板层组织 - 迁移到
postcss-nested或scss？Less的&行为更接近BEM原意，但SCSS的&支持&.modifier语法更灵活；迁移前先跑一遍lessc --lint检查嵌套深度
BEM的优雅不来自语法糖，而来自对“Block必须自治”的坚持。&只是工具，真正容易被忽略的是：每次敲下&__前，得确认这个Element确实只属于当前Block，且没有隐式依赖父容器的布局或状态。
