Block不是容器而是功能单元；判断标准为能否脱离上下文独立存在且具明确语义名词命名，如user-avatar、search-form，禁用main-content等布局占位符及HTML标签名。
Block 不是容器，而是功能单元；写错 Block 名，往往意味着 DOM 结构或职责切分本身就有问题。
怎么判断一个元素该不该当 Block
关键就两点：它能否脱离当前上下文独立存在？有没有明确、可复用的功能语义？
- 删掉它，页面是否缺失某个完整功能（比如搜索、登录、商品卡片）？是 → 有可能是 Block
- 命名必须是名词，小写 + 短横线，如
user-avatar、search-form，不能是top-banner（带位置）或my-button（带归属） -
main-content、section-2、container这类纯布局占位符，没行为逻辑，也不具备复用价值，不该作为 Block - HTML 标签不是 Block：不要因为用了
div就叫div-block，Block 是抽象出来的功能模块，和标签无关
为什么 nav__item__dropdown 是错的
多级导航菜单里，nav 和 dropdown 必须是两个独立 Block。强行把下拉菜单写成 nav__submenu 或 nav__dropdown，本质是混淆了布局边界与交互边界。
-
dropdown有自己完整的交互逻辑（展开/收起、键盘导航、焦点管理），它不依赖nav存在 - 子级
dropdown不是nav的嵌套部分，而是独立实例，应单独声明为dropdownBlock - 跨 Block 命名（如
nav__item__dropdown）会破坏样式隔离——改nav__item的padding，可能意外影响下拉区域的定位
card__title--large 合法，但 card__title__icon 不合法
BEM 只承认一层嵌套关系：block → element，不承认 element → sub-element。
立即学习“前端免费学习笔记（深入）”；
-
card__title--large合法：修饰符作用于card__title自身，语义清晰 -
card__title__icon违反规则：图标若只是标题左侧装饰，应作为修饰符处理 ——card__title card__title--with-icon - 若图标具备独立语义（如状态徽标、权限标识），它就该升格为新 Block：
badge，再通过上下文组合使用 - SCSS 中一旦出现
&__item &__icon（中间带空格），等于生成后代选择器，破坏 BEM 隔离性
修饰符必须和对应 Block 或 Element 类名共存
单独用 card--featured 没问题，但 card__title--large 必须和 card__title 同时出现在 HTML 的 class 属性里。
- 否则语义断裂：CSS 里写
.card__title--large，但 HTML 没挂card__title，开发者无法推断这个“大号标题”属于哪个结构上下文 - 多个修饰符要并列使用：
button button--primary button--disabled✅，button--primary--disabled❌ - 修饰符值必须可预测：
button--red是危险信号，换品牌色就得全局搜替换；button--primary才能映射到变量$color-primary，支持主题切换
真正难的不是写对类名，而是每次加一个 class 前，先问一句：这个东西，能不能被另一个页面直接 copy-paste 过去还能用？如果答案是否定的，那它大概率不是 Block，或者还没被正确抽象出来。
