直接用table或tr当Block名会导致样式失控，因浏览器硬性限制tr默认display:table-row、不支持flex/position:absolute/:hover等；必须按业务命名如user-list-table，并用BEM规范分工：__row管行交互状态，__cell管列样式，修饰符须语义化且跨表统一。
直接用 table 当 Block 名，行和列样式基本不可控——这不是写法问题，是浏览器对 tr、td 的硬性限制导致的。
为什么不能把 table 或 tr 当 Block 名
浏览器给 tr 加了隐式 display: table-row，且不支持 flex、position: absolute、:hover 在某些旧版 Safari/Edge 中完全失效；col 标签连 ::before 都不渲染，更别说背景色或边框。你写 table__row 后发现 hover 不触发、列宽错位、React 渲染后 colgroup 错行，都是这个原因。
必须按业务功能命名 Block：
-
user-list-table（用户列表） -
order-summary-table（订单汇总） -
audit-log-table（审计日志）
每个 Block 独立存在，类名搜索能精准命中，样式不跨表污染。
__row 和 __cell 怎么分工才不混乱
别依赖 tr / td 标签来区分样式责任。BEM 要求显式声明职责：
-
user-list-table__row：只用于整行交互逻辑，比如悬停背景、高亮状态、展开折叠 -
user-list-table__cell：统一控制所有单元格的内边距、换行、垂直对齐 -
user-list-table__header-cell：只用于表头，承载排序、筛选、固定列等逻辑
行状态修饰符（如 --pending、--error）必须加在 __row 上；列职责修饰符（如 --status、--amount）必须加在 __cell 上——混用会导致语义断裂，后续维护时根本分不清哪个类管什么。
列样式为什么必须用 __cell--xxx 而不是 col 或位置类
HTML 中没有“列”的真实 DOM 节点，col 只是结构占位符，不支持伪类、背景、border，且在 Vue/React 动态渲染中极易错位。试图给“第3列”加类或用 colgroup 控制样式，本质是在对抗浏览器限制。
所有列级样式必须收口到 __cell 的 Modifier 上：
-
user-list-table__cell--status→ 控制居中、状态图标、背景色 -
user-list-table__cell--amount→ 控制右对齐、千分位、货币符号 -
user-list-table__cell--actions→ 控制按钮间距、悬停展开逻辑
修饰符名必须反映业务角色（--status），而非位置（--col3）或视觉（--blue-bg）。否则换一个表格就要重写一整套类名。
响应式隐藏列该怎么做才稳定
隐藏列不是删 DOM，而是控制显示。用媒体查询配合 Modifier 即可：
@media (max-width: 768px) {
.user-list-table__cell--phone {
display: none;
}
}
这样既保持 DOM 稳定（利于 SSR 和焦点管理），又避免 JS 操作 colgroup 导致的错位风险。别用 JS 移除 col 或条件渲染 td，那会破坏屏幕阅读器行为，2026 年主流读屏器已明确要求列结构在首屏 HTML 中完整存在。
最容易被忽略的是：列修饰符（如 --status）必须跨表格保持语义一致——你在 user-list-table 里用了 --status，就不能在 order-summary-table 里改叫 --state，否则团队协作时没人能猜出这两个类是否等价。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
