bem表格block必须按业务功能命名（如user-list-table），禁用table等原生标签名；thead/tbody仅保语义，样式由__header-cell、__cell及modifier精准控制，列宽对齐等均通过modifier实现，避免colgroup和原生标签样式干扰。
直接用 table 标签当 Block 是最常踩的坑，会导致 tr 和 td 样式失控、列宽错位、调试时类名污染严重——正确做法是按业务功能命名 Block，比如 user-list-table，所有样式只挂载在它的 Element 和 Modifier 上。
表格 Block 名为什么不能叫 table 或 table-component
浏览器对 table、tr、td 有强默认样式（如 border-collapse、vertical-align: middle），且部分 CSS 属性（flex、position: absolute）在 tr 上不生效。一旦你写 table__row 并试图覆盖，就会遇到：
-
tr.table__row:hover在 Safari 或旧版 Edge 中完全不触发 - React/Vue 动态渲染
colgroup时列宽错位 - 全局搜索
table__会命中几十个无关组件，失去语义隔离
必须用业务语义命名 Block：user-list-table、order-summary-table、audit-log-table——每个 Block 独立维护，互不污染。
__header-cell 和 __cell 怎么分工才不混乱
别依赖 th 和 td 标签来区分样式责任。BEM 要求显式声明职责：
-
user-list-table__header-cell：只用于表头，承载排序、筛选、固定列等交互逻辑 -
user-list-table__cell：统一控制所有单元格的内边距、换行、垂直对齐 - 列职责靠 Modifier 表达：
user-list-table__cell--status、user-list-table__cell--date，而不是user-list-table__cell-status（缺双下划线 = 不是 BEM 元素）
例如金额列右对齐，就写 user-list-table__cell--amount { text-align: right; }，和它在 th 还是 td 里无关。
列样式为什么不能用 colgroup + col
col 标签在多数浏览器中不支持伪类、背景色、border 等关键样式，且 React/Vue 渲染时极易错位。BEM 不解决这个底层限制，但能帮你避开陷阱：
- 列宽统一收口到
user-list-table__cell--name的width或flex-basis - 列对齐不用
<col align="right">，改用user-list-table__cell--amount { text-align: right; } - 响应式隐藏某列？加 Modifier：
user-list-table__cell--phone--hidden@md，配合媒体查询，比操作col更可控
记住：col 没有独立 DOM 节点，它只是结构占位符；真正承载样式的只有 __cell 及其 Modifier。
原生 tr、td 标签还能用吗
可以保留，但角色必须明确：它们只负责语义与基础结构，所有样式由 BEM 类接管。常见错误是同时写 <tr class="user-list-table__row"> 又保留 <code>tr:hover 规则，结果 hover 效果被覆盖或冲突。
- 重置原生样式：
tr, td, th { background: transparent; border: none; padding: 0; } - BEM 类全量接管交互：
.user-list-table__row:hover .user-list-table__cell控制悬停背景 - 禁止写
tr.user-list-table__row这类冗余选择器——当某天换成div模拟表格时，样式层完全解耦，DOM 结构可变，类名照旧
最容易被忽略的是：状态修饰符（如 --pending）必须加在 __row 上，而不是 __cell 上；列修饰符管“职责”，行修饰符管“状态”，混用会导致样式逻辑断裂。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
