BEM中Block和Element的判断标准是能否脱离当前Block单独存在并跨项目复用：.button、.icon是Block；.button__loader是Element；.button__text不是Element。
Block和Element的判断标准不是“大小”或“嵌套位置”
初学者常凭视觉直觉判断：按钮里有文字，所以.button__text是Element；卡片里有标题，所以.card__title是Element——但.button__text往往根本不是Element，它只是按钮内部一段普通文案，没有独立样式逻辑、不参与变体、不被复用，连类名都不该存在。真正该成为Element的，是像.button__loader这种在多个按钮类型中承担统一加载状态职责的子单元。
判断依据只有一条：它能不能脱离当前Block单独存在、跨项目复用？
-
.button可以：登录页、弹窗、侧边栏各放一个，互不影响 → 是Block -
.card__title不行：抽出来单独用，既没语义也没样式边界 → 是Element -
.icon可以：在按钮、卡片、导航里反复出现，且自带尺寸、颜色、交互逻辑 → 它本身就是Block，不该写成.button__icon
双下划线不是语法糖，而是语义锁
看到__就以为“这是子级”，这是最典型的误读。BEM里__不是DOM父子关系标记，而是语义依附声明：它强制你确认——这个类名是否真的承担了可复用的样式职责？是否和所属Block构成“整体-零件”的稳定契约？
常见翻车点：
- 写
.header__nav-item：但.nav-item其实是另一个独立组件（可能来自导航模块），强行塞进header命名空间，破坏了它的复用性 - 写
.search-form__input--disabled：元素不能直接带修饰符，应是.search-form__input配合.search-form--disabled，否则状态逻辑就锁死在input上，无法作用于整个表单 - 写
.card__content__footer：BEM禁止Element嵌套，超一级就是设计错误，说明.card__content本身已承担过多职责，该拆出新Block
Block命名错位，会连锁污染整个层级
把.form__input当作Element，本质是把“表单”当成了Block；但实际中，“搜索表单”和“筛选表单”语义不同、样式不同、API不同——它们本该是两个Block：.search-form和.filter-form。一旦Block名泛化（如.form、.section、.container），所有下属Element都会失去上下文锚点，变成一堆无法定位、不敢修改的幽灵类名。
真实项目里，Block名必须带业务或功能指向：
- ✅
.search-input、.user-avatar-upload、.order-summary-card - ❌
.input、.avatar、.card（太泛，必然撞车） - ❌
.primary-button（含修饰语，说明它本该是.button--primary）
Element不是必须存在的，删掉才是正确操作
很多HTML结构里塞了一堆只为加margin或包裹文字的div，还硬配__wrapper、__inner这类类名。BEM不要求数量匹配，只要求语义必要。如果一个“Element”：
- 没有独立CSS规则（全靠继承或父级控制）
- 不响应任何Modifier（比如
--compact或--dark） - 不参与任何复用场景（不会出现在其他Block里）
那它就不该有类名。直接用<span></span>或<p></p>标签选择器，或让父Block通过>子选择器控制——这才是轻量、可维护的写法。BEM最难的不是记住__和--，而是在加类名前，先问一句：它有没有资格独立存在？
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
