应使用colgroup+col定义列结构并配合bem类名table__col--status、table__header--status、table__cell--status解耦控制，避免nth-child失效及嵌套命名错误，修饰符须表业务状态，属性选择器增强语义，firefox需td fallback背景色。
表格列样式失控？用 colgroup + col 定义结构，别靠 nth-child
纯 CSS 无法真正“选中第 3 列所有单元格”，因为 tr > td:nth-child(3) 在遇到 colspan 时立刻失效。这不是选择器写得不够巧，而是 DOM 结构和视觉列根本不对齐。
正确做法是提前用语义化标签占位：
-
col标签本身不可见，但支持width、background（Firefox 支持不稳定，需 fallback）、border（部分浏览器）、visibility - BEM 类名要解耦：列结构用
table__col--status，表头用table__header--status，单元格用table__cell--status，三者职责分明 - 别写
table__col--status table__cell--status这种后代选择器——它破坏 BEM 隔离原则，且无法应对动态插入行的场景
表头和单元格类名嵌套？table__header__id 是错的
BEM 的 __ 只表示「块 → 元素」，不是「元素 → 子元素」。table__header__id 看似省事，实际违反规范，也埋下复用隐患：这个类一旦被挪到弹窗表格里，语义就错乱了。
- ✅ 正确写法：
table__header--id、table__cell--status—— 所有元素都直属于table块 - 修饰符（
--）必须反映业务状态，比如--pending、--error，而不是视觉描述如--blue-bg - 如果某列需要统一文字居中，就写
.table__cell--status { text-align: center; }，别依赖 DOM 层级或额外 wrapper
排序图标、状态 tooltip 怎么加？用属性选择器补语义，别硬塞类名
HTML 中 th 和 td 语义不同，但默认样式几乎一样；BEM 类名又没法覆盖所有交互细节——比如“可排序的 ID 表头”或“带 tooltip 的 status 单元格”。
- 用
data-sortable或data-status增强语义：<th data-sortable class="table__header--id"> <li>CSS 里这样控制：<code>th[data-sortable].table__header--id::after，不影响其他table__header--id - IE11 不支持
[data-status="active pending"]这种空格分隔写法，需改用[data-status~="active"] - 避免分开写
th.table__header和td.table__cell—— 容易漏掉响应式或状态变体，统一用.table__header/.table__cell，再靠属性或修饰符细分 - 原地升级：
class="user-table"替换泛化名，再给内部元素加归属：<th class="user-table__header--name"> <li>禁止写 <code>.user-table .user-table__header这种后代选择器——它默认父容器永远不变，而 BEM 的契约是“删掉user-table，子元素仍能渲染” - 如果已有
class="status-cell active"，先保留active作别名过渡，新代码只用user-table__cell--active - JS 控制状态时，只操作根节点类名：
rowEl.classList.toggle('user-table__row--selected', isSelected)，不要遍历子元素手动加类
旧项目表格怎么安全套 BEM？别动 HTML 结构，只加归属类名
老项目里 <table class="user-list"> 这种写法很常见，直接改成 <code>table__body 会崩掉 JS 绑定和校验逻辑。
最易被忽略的是 col 的浏览器兼容性——Firefox 对 background 渲染不一致，必须准备 td.user-table__cell--status 作为 fallback；还有 data- 属性在 IE11 中的值匹配方式，稍不注意就导致排序图标不显示。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
