直接用原生table当block会导致tr/td样式失效、调试困难、列宽错位及语义污染；应按业务命名block（如user-list-table），用bem规范区分__header-cell/__cell及--modifier，所有样式挂载到block类上而非原生标签。
直接用 table 当 Block 是最常踩的坑——它会让 tr、td 的样式控制失效，调试时搜 table__ 会命中几十个无关组件，根本分不清哪段样式管哪张表。
为什么不能把原生 table 标签当 Block
浏览器对 tr 和 td 有强默认样式（比如 vertical-align: middle、border-collapse），且不支持很多 CSS 属性（如 flex、position: absolute）。一旦你写 .table__row 并试图覆盖这些行为，就会遇到：
-
tr.table__row:hover在某些浏览器里完全不触发 - React/Vue 动态渲染时，
colgroup容易错位，导致列宽崩掉 - 全局搜索
table__会匹配到所有表格相关类，失去语义隔离
正确做法是按业务功能切块：user-list-table、order-summary-table、audit-log-table。每个 Block 独立维护，互不污染。
user-list-table__header-cell 和 user-list-table__cell 怎么区分才不混淆
别依赖 th 和 td 标签来区分语义——它们只是 HTML 基础结构，不是样式责任主体。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--status 就能统一控制文字居中、状态图标、背景色，和是否在 th 还是 td 无关。
行样式该挂 __row 还是直接加在 tr 上
必须用 user-list-table__row，且只挂在这个类上：
-
tr标签只保留语义，所有样式由user-list-table__row接管 - 状态类（如
--pending、--error）必须加在user-list-table__row上，不能加在user-list-table__cell上——列修饰符管“职责”，行修饰符管“状态” - 避免同时写
tr.user-list-table__row:hover和独立的tr:hover，后者容易被覆盖或冲突
例如高亮某行，应该写：<tr class="user-list-table__row user-list-table__row--highlighted">，对应 CSS 是 <code>.user-list-table__row--highlighted 独立规则，不嵌套、不依赖父级媒体查询位置。
最容易被忽略的是：列没有独立 DOM 节点，所以 --status 这类修饰符永远不该出现在 col 或 colgroup 上；它只属于 __cell，且必须跨表格保持语义一致——否则你在 order-summary-table 里改了 --status 的颜色，user-list-table 就不会同步。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
