BEM禁止使用div.card等标签选择器，因其破坏样式作用域隔离——BEM依赖类名自身表达边界，混入标签名会使样式强耦合DOM结构，一旦HTML结构调整（如换用section或Flexbox），样式立即失效；必须仅用.card、.card__title等纯类名选择器。
为什么BEM里禁止用div.card这类标签选择器
BEM 的样式作用域完全靠类名自身表达边界，一旦混入div.card这种写法，就等于主动放弃隔离能力——浏览器会把div当作必要条件，哪怕你把.card换成或，样式立刻失效。
常见错误现象：.header__nav ul li a被重写成.header__nav .header__nav-item，表面加了 BEM 前缀，实际仍依赖 DOM 层级；后续换用 Flexbox 替代ul/li时，整套导航样式得重写。
- 所有 BEM 规则必须只基于类名：
.card、.card__title、.card--loading，禁止任何标签名、伪类、属性选择器参与核心样式定义 - 若真需区分容器语义（比如
下的card行为不同），应通过顶层 class 控制：.layout-header .card或[data-layout="header"] .card，而非硬绑标签 - 工具链中启用
stylelint-selector-bem-pattern并配置componentName: "^[a-z][a-z0-9-]*$"，可拦截div.card类写法
.card__title:hover和.card__title--hover哪个更符合BEM
.card__title:hover是合法且推荐的写法；.card__title--hover是典型误用。BEM 的--修饰符只描述静态可复用的状态或变体，比如--disabled、--compact，而:hover是用户交互触发的临时视觉反馈，不属于组件固有状态。
混淆这两者会导致：同一修饰符在不同上下文要重复定义 hover 样式（如.btn--primary:hover和.link--primary:hover），违反 DRY；更严重的是，当 JS 主动添加--hover类模拟悬停效果时，会和真实伪类冲突，调试时根本分不清是哪段逻辑生效。
- 基础交互统一由基础类接管：
.card__title:hover { color: #007bff; }，不带 Block 前缀也行，只要它不污染全局 - 仅当某修饰符需要覆盖默认交互行为时，才显式写
.card__title--disabled:hover { cursor: not-allowed; } - 避免在 Sass 中用
&:hover嵌套生成：.card__title { &:hover { } }是 OK 的，但.card__title { &--active { &:hover { } } }就越界了
第三方组件嵌入时，标签选择器是不是唯一出路
不是。给 Ant Design 的塞进profile-card里，别试图给它加profile-card__button类，也别写.profile-card .ant-btn——后者会随库升级失效，前者破坏其内部状态类（如.ant-btn-disabled）。
标准解法只有一条路径：在外层 DOM 加 wrapper 类：，CSS 中只用该 wrapper 限定作用域：.profile-card__trigger { padding: 0 16px; }，不碰.ant-btn本身。
- 若需调整第三方组件内部样式（如输入框内边距），用
:deep()（Vue）或[class^="ant-input"]（通用 CSS），但必须带 wrapper 前缀：.profile-card:deep(.ant-input) { } - 禁用
.profile-card button这种标签选择器——框架可能用span或a替换button，样式立即断裂 - Wrapper block 是唯一安全出口，它把第三方样式约束在明确的 Block 边界内，不依赖标签类型
什么时候真的需要用标签选择器？
极少数场景下，标签选择器不是“可用”，而是“不得不小心用”：比如重置表单控件默认样式（input[type="text"]）、强制 SVG 内联颜色（svg path）、或处理富文本编辑器输出的不可控 HTML（p strong）。
但这些都不属于 BEM 组件体系，而是基础设施层或内容层的兜底策略。它们必须满足两个前提：一是位于独立的作用域文件（如reset.css或content-styles.css），二是不能与任何 Block 类名共存于同一选择器（禁止.card p）。
- 所有 BEM 组件样式文件里，
div、span、button等标签名出现次数应为 0 - 构建后用
grep -r "^[a-zA-Z][a-zA-Z0-9]*\." src/css/ | grep -v "^[a-z]\+__[a-z]\+--\|^[a-z]\+__[a-z]\+\|^[a-z]\+--[a-z]\+"可快速揪出残留的非 BEM 标签选择器 - 真正难坚持的不是写法，而是拒绝用标签选择器、拒绝嵌套、拒绝在类名里塞样式值——每一条都在堵一个真实发生过的线上样式事故入口
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
