表格 Block 名必须按业务功能命名，如 user-list-table；禁止使用 table、thead 等通用名；单元格修饰符需语义化（如 --status）、跨表统一；表头与单元格样式通过 __header-cell 和 __cell 显式声明，避免依赖原生标签默认样式。
别用 table 当 Block 名，这是最常踩的坑——它会让 tr、td 样式失控，调试时搜 table__ 会命中几十个无关组件，语义完全失效。
表格 Block 名必须按业务功能命名，不能是 table 或 thead
浏览器对原生 table、thead、tr 有强默认样式（比如 border-collapse、vertical-align: middle），且部分 CSS 属性在 tr 上压根不生效。你写 .table__row:hover，Safari 或旧版 Edge 可能根本不触发。
- 正确命名：
user-list-table、order-summary-table、audit-log-table - 禁止命名：
table、table-component、thead、tbody - 每个 Block 独立维护，互不污染；全局搜索
user-list-table__就只拉出用户列表相关样式
列职责靠 __cell--xxx 修饰符表达，不是 __col3 或 __status-cell
列没有独立 DOM 节点，硬给“第 3 列”加类名只会让结构和样式脱节。修饰符必须反映列的业务角色，且跨表格一致。
- 推荐：
user-list-table__cell--status、user-list-table__cell--date、user-list-table__cell--actions - 错误：
user-list-table__cell--col3（位置依赖）、user-list-table__cell--pending（状态应挂在行上） - 金额列右对齐？直接写
user-list-table__cell--amount { text-align: right; }，和它在th还是td里无关
表头与单元格样式不靠 th/td 标签区分，而用 __header-cell 和 __cell 显式声明
原生 th 自带加粗、居中等隐式样式，容易干扰统一控制。BEM 要求语义归标签、样式归类名，二者解耦。
立即学习“前端免费学习笔记（深入）”；
-
user-list-table__header-cell：承载排序图标、筛选下拉、固定列逻辑 -
user-list-table__cell：统一控制内边距、换行、垂直对齐 - 需要表头右对齐？用
user-list-table__header-cell--amount，而不是依赖th:nth-child(4) - 避免写
tr.user-list-table__row+ 单独的tr:hover规则，hover 效果必须由 BEM 类全量接管
响应式隐藏列或调整列宽，别碰 colgroup，用修饰符 + 媒体查询
col 标签在多数浏览器中不支持伪类、背景色、border，React/Vue 动态渲染时还极易错位。BEM 不解决底层限制，但能帮你绕开。
- 隐藏手机号列：
@media (max-width: 768px) { .user-list-table__cell--phone { display: none; } } - 列宽控制收口到
user-list-table__cell--name { width: 200px; }或flex-basis - IE11 不支持
[data-status="active pending"]这种空格分隔多值写法，需改用[data-status~="active"]才能匹配
真正难的不是写对类名，而是坚持让每一处 -- 修饰符都可预测、可复用——比如所有表格的“状态列”都叫 --status，而不是这个叫 --state、那个叫 --flag。一旦松动，BEM 就退化成带下划线的普通类名。
