bem 中表格样式应由业务 block（如 user-list-table）的 element 类控制，thead/tbody 仅保留语义结构，禁止直接使用 .thead/.tbody 类名；列样式须通过 __header-cell、__cell 及 modifier 精准管理，避免依赖原生标签默认样式或 col 标签。
直接用 thead 和 tbody 类名是错的
浏览器原生支持 thead、tbody 标签，但它们不是语义化的“块”，而是 HTML 结构标签。直接写 .thead 或 .tbody 类名会混淆结构与样式职责，也违背 BEM 原则——BEM 的 Block 必须是业务功能模块，比如 user-list-table，而不是 DOM 标签名。
常见错误现象：.thead { background: #f5f5f5; } 看似简洁，但一旦多个表格共用该类，样式就会全局污染；更糟的是，它和原生 <thead> 标签名冲突，容易引发开发者误读或工具链（如 CSS-in-JS）解析异常。
<ul>
<li>Block 名必须体现业务场景，如 <code>order-summary-table、inventory-grid
thead 标签只保留语义和默认结构作用，所有样式通过 Block 下的 Element 类接管thead 标签加 class="order-summary-table__header" 以外的类——尤其避免同时存在 class="thead" 这种命名
user-list-table__header-cell 比 th 更可控
原生 th 标签自带隐式语义和默认样式（如加粗、居中），但 BEM 要求样式与语义解耦：语义由标签承担，样式由类名控制。所以推荐显式使用 user-list-table__header-cell 替代对 th 的直接样式覆盖。
这样做的好处是：列对齐、字体权重、背景色等都能按列职责统一管理，且不会被浏览器默认样式干扰。例如，金额列需要右对齐，状态列需要居中，都可以通过 Modifier 精准控制：
-
user-list-table__header-cell--amount→text-align: right -
user-list-table__header-cell--status→text-align: center - 不依赖
th的加粗行为，改用font-weight: 600显式声明 - 如果某列需禁用表头样式（如导出按钮列），直接不加
__header-cell类即可，比覆盖th:last-child更安全
tbody 不该有独立样式类，行和单元格才是样式入口
tbody 是容器级语义标签，本身不承载视觉职责。BEM 中不建议为它设样式类，因为它的样式最终都会透传到 tr 和 td 上，反而增加冗余选择器层级。
正确做法是把样式收口到 Block 的 Element 上：
- 整行样式走
user-list-table__row（替代原生tr） - 数据单元格统一用
user-list-table__cell，再按列加 Modifier：user-list-table__cell--id、user-list-table__cell--name - 斑马纹用
user-list-table__row--odd/--even，而非tbody tr:nth-child(odd)—— 后者在动态插入行时容易失效 - 悬停效果绑定在
user-list-table__row:hover，避免tbody:hover这种无效写法
Firefox 下 col 的 background 不可靠，别指望它撑起列样式
虽然 <colgroup><col class="col-status"></colgroup> 看起来能统一控制列宽和背景，但 Firefox 对 col 的 background 支持长期不稳定，且无法应用伪类、渐变、border-image 等关键样式。React/Vue 中动态渲染 col 元素还常导致列宽错位。
真正可维护的做法是放弃 col 承担样式职责，全部交给 Element + Modifier：
- 列宽用
user-list-table__cell--status { width: 120px; }或flex-basis - 列背景统一由
user-list-table__cell--status控制，必要时 fallback 到user-list-table__row > td:nth-child(3) - 响应式隐藏列？加
user-list-table__cell--phone--hidden@md，比操作col更稳定 - 记住：
col只适合极简场景下的静态列宽定义，复杂表格中它是个隐患点
最易被忽略的一点：BEM 不是给每个 HTML 标签套个类就完事。表格里真正要命的不是怎么命名，而是谁该负责哪一层样式——thead 和 tbody 是结构锚点，不是样式接口；列样式必须落到单元格上，哪怕多写几个 Modifier，也好过靠 col 或隐式 th 行为去猜。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
