bem 类名必须用 & 显式绑定块级作用域，因 & 始终代表完整父选择器而非最近块名，深层嵌套会破坏“元素仅属一个块”原则；修饰符须依附块/元素，媒体查询不可嵌套，bem 是作用域契约而非命名习惯。
直接用 & 拼接 BEM 类名是安全且推荐的做法，但必须配合块级作用域显式声明，不能依赖 & 自动推导父类名。
为什么 &__element 不能直接写在任意嵌套里
Less 的 & 始终代表“当前选择器的完整父级”，不是“最近的块名”。如果写成 .card { .header { &__title {} } }，编译结果是 .card .header__title，而不是预期的 .card__title —— 这违反了 BEM “一个元素只属于一个块” 的原则。
-
&在深层嵌套中会带出所有祖先路径，比如.modal .overlay .content { &__header {} }→.modal .overlay .content__header - 真正需要的是
.card { &__header {} }，此时&才等于.card，输出.card__header - 块名必须作为顶层选择器显式写出，否则
&就没锚点
@block 变量 + & 是唯一可控方式
Less 不支持语法级 BEM 支持，&--modifier 或 &__element 必须基于已定义的块选择器。靠 @block: "card" 配合字符串插值（如 .@{block}__header）会脱离嵌套上下文，生成平级类，丢失作用域约束。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 正确写法：
.card { &__header { padding: 1rem; } &--collapsed { height: 0; } } - 错误写法：
@block: "card"; .@{block}__header { ... }→ 输出.card__header，但无法与.card样式共用变量或继承逻辑 - 若需复用，应封装为 mixin 并传入
@block，但内部仍要靠&绑定上下文，而非纯字符串拼接
修饰符必须和块/元素绑定，不能单独定义
BEM 的 --modifier 不是独立状态类，它必须依附于某个块或元素。写成 .card--hover 单独定义，再在 HTML 里加 class="card card--hover" 是合法的，但一旦嵌套进其他结构（比如 .list .card--hover），权重就失控，且无法被 .card:hover 自然触发。
- 推荐写法：
.card { &:hover { &--hover { opacity: 0.8; } } }，确保.card--hover只在.card:hover下生效 - 更常见的是直接用
&--disabled等静态修饰符：.btn { &--disabled { pointer-events: none; } } - 避免
.card { .card--hover { ... } }，这会产出.card .card--hover，权重翻倍且语义错位
嵌套层级超过 3 层时，BEM 类名比缩进更可靠
当你发现写出了 .dialog { .body { .content { .text { font-size: 14px; } } } }，说明结构已经失控。BEM 要求把每个视觉单元都提升为平级块或元素类，而不是靠 CSS 层级模拟 DOM 深度。
- 应改为：
.dialog__body { .dialog__content { .dialog__text { ... } } }，或更合理地拆成.dialog__content和.text-block两个独立块 - 调试时，Chrome DevTools 显示的源码映射在嵌套 >3 层后基本失效，而
.dialog__text这类类名搜索、定位、覆盖都明确 - 媒体查询坚决不塞进嵌套里：
.card { @media (max-width: 768px) { &__header { ... } } }会导致同一段样式重复输出多次
最易被忽略的一点：BEM 不是命名习惯，而是作用域契约。只要块名没出现在顶层选择器里，&__xxx 就不可信；所有修饰符类都必须能通过 HTML 中的 class 列表直接对应到某一个块或元素，中间不能有“隐式上下文”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
