CSS BEM命名中为什么不建议直接写标签选择器？

BEM不建议使用标签选择器，因其使样式与HTML语义强绑定，导致组件复用困难、易冲突失效；应改用如.btn--submit等归属明确的类名以保障可迁移性与协作安全。

直接写 button、ul、h2 这类标签选择器，等于主动放弃样式归属权——它让 CSS 和 HTML 语义强绑定，一旦结构微调或组件复用，样式立刻失效或冲突。

标签选择器会让样式脱离组件上下文

比如写 button:hover，浏览器会匹配页面里所有 <button>，不管它属于登录表单、弹窗还是第三方组件。真实项目中，Ant Design 的 button 和你写的 button:hover 必然互相覆盖；Cypress 测试靠类名定位，button 匹配整个页面，根本没法精准点击。

1. .btn--submit:hover 只作用于提交按钮，换到卡片或弹窗里照样生效
2. ul 无法区分导航菜单、评论列表、侧边栏链接——三者语义不同，但标签相同，样式必然冲突
3. SSR 或微前端动态注入时，ul 没有命名空间，极易被全局重置样式（如 normalize.css）意外干预

HTML 语义 ≠ CSS 归属语义

开发者常以“HTML 语义化”为由保留 article h2，但这其实是混淆：HTML 的 <h2> 表示层级重要性，而 CSS 需要回答“这个标题属于哪个模块、什么状态”。article h2 把样式绑死在 <article> 内，挪到卡片或弹窗就失效；card__title 则只认类名，跟标签和位置无关。

1. form input[type="text"] 无法表达“搜索输入框”还是“用户名输入框”，且 React/Vue 可能封装为自定义组件，标签根本不是 input
2. svg path 样式应归属 icon--search，换用 iconfont 或 <img> 就崩
3. 无障碍升级时，所有基于 h2 的样式可能因语义调整（如改用 div role="heading"）而全部失效

标签选择器破坏 BEM 的作用域隔离机制

BEM 的核心是把模块关系编码进类名：search-form__input--disabled 明确声明了归属（search-form）、角色（input）、状态（disabled）。而 button.search-form__submit 这种写法，表面加了类名，实际仍依赖标签，框架一换标签（比如用 <span> 模拟按钮），样式就断。

1. 禁止写 .search-form .search-form__submit：这是后代选择器，触发 DOM 回溯，权重变高，结构一动就失效
2. 禁止写 button.search-form__submit：标签 + 类名组合，既污染全局，又让样式无法移植
3. 工具链（如 stylelint-selector-bem-pattern）会直接报错，因为它违反 BEM “仅允许单类名选择器” 的硬约束

真正难的不是记住“别写 button”，而是每次敲下它时，是否清楚自己正在交出哪部分控制权——是交给了某个具体组件，还是交给了整个 HTML 规范。