CSS BEM规范下表格的行高亮和选中状态怎么命名？-css教程-PHP中文网

应使用 user-list-table__row--selected；该修饰符直属于业务 block 的行元素，由组件状态驱动，专用于标记当前操作对象，确保整行高亮、语义明确且兼容多选与移动端。

css bem规范下表格的行高亮和选中状态怎么命名？

表格行高亮该用哪个元素名？

别写 table__row--highlight，更不能用 tr.highlight。BEM 要求行本身是 Element，必须直属于业务 Block，比如 user-list-table__row。高亮是视觉反馈，属于状态类 Modifier，但它的作用目标必须明确：是整行被 hover 或 focus，还是某行被标记为“当前操作对象”？前者用 user-list-table__row--hovered，后者用 user-list-table__row--selected。

常见错误现象：table__row--active 在多选表格里语义模糊——它可能被误用于键盘焦点、鼠标悬停、API 加载中、甚至编辑态；tr:hover 无法在移动端稳定触发，且和 React/Vue 的动态 class 冲突。

user-list-table__row--hovered：仅用于 CSS :hover + JS 模拟 hover 的 fallback，不参与业务状态管理
user-list-table__row--selected：由组件状态驱动，比如点击后设置该类，支持多选时可叠加（不需要额外逻辑清除）
user-list-table__row--loading：仅当某行正在异步加载子数据时使用，避免和 --selected 同时出现造成样式覆盖

选中状态该挂在哪一层？

选中状态不是单元格的事，也不是表头的事，它是整行的业务状态。所以修饰符必须挂在 user-list-table__row 上，而不是 user-list-table__cell 或 user-list-table__header-cell。否则你会遇到：点击某列触发选中，但只有那一列高亮；键盘导航切换行时，样式没同步；打印或截图时选中态丢失（因为只靠 JS 动态加在某个 cell 上）。

性能影响：把 --selected 放在 row 元素上，CSS 只需一条规则就能控制整行背景、边框、阴影，无需遍历所有 cell 去加类；React/Vue 更新时也只需 patch 一个 DOM 节点的 className，而不是 n 个。

✅ 正确：<tr class="user-list-table__row user-list-table__row--selected"><li>❌ 错误：<code><td class="user-list-table__cell user-list-table__cell--selected">（语义错位，且无法统一控制行内对齐/垂直间距） <li>❌ 错误：<code><tr class="user-list-table__row"><td class="user-list-table__cell--selected">（破坏 BEM 隔离，CSS 权重易失控） <h3>怎么避免 hover 和 selected 样式打架？</h3> <p>两者都是 Modifier，但优先级不同：用户主动选择（selected）应高于被动交互（hover）。CSS 里不能靠顺序硬压，得靠结构区分。最稳妥的做法是让 <code>--selected 控制背景色和边框，--hovered 只控制 box-shadow 或 opacity，不碰 background-color。

PigX UI 前端开发
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

容易踩的坑：user-list-table__row--hovered 和 user-list-table__row--selected 同时存在时，如果都写了 background，浏览器会按 CSS 规则顺序渲染，但 JS 状态切换时 class 切换有微小延迟，导致闪动；Firefox 下 :hover 伪类在某些 flex table 布局中完全不生效。
- hover 修饰符只负责非破坏性反馈：如 box-shadow: 0 1px 2px rgba(0,0,0,0.1)、opacity: 0.95
- selected 修饰符独占关键样式：如 background-color: #e6f7ff、border-left: 3px solid #1890ff
- 不要写 .user-list-table__row--hovered.user-list-table__row--selected 这种组合选择器——它违反 BEM “一个元素一个职责”原则，也增加维护成本
移动端长按选中怎么兼容？

移动端没有 :hover，但需要模拟类似交互。别新增 --tapped 修饰符，而是复用 --hovered 并用媒体查询隔离：@media (hover: none) { .user-list-table__row--hovered { opacity: 0.8; } }。这样既减少类名数量，又保证逻辑一致。

真正复杂的是“长按触发多选”的场景：用户长按某行，进入选择模式，再点击其他行追加选中。这时候 --selected 是持久态，--hovered 是临时态。必须确保 JS 清除 --hovered 时不误删 --selected ——建议用两个独立的 state 字段分别管理，而不是靠 className 字符串判断。

容易被忽略的地方：iOS Safari 对 touchstart + touchend 的响应有 300ms 延迟，直接监听会导致长按反馈滞后；应该用 pointerdown + pointerup，并配合 getCoalescedEvents() 处理连续触点。