真正通用的class类名需具备作用域、无嵌套依赖、不绑定语义结构，如.ui-table及其正交修饰符.ui-table--striped、ui-table--hover等，支持自由组合；响应式应抽离为独立类.ui-table--responsive；border-collapse失效常因祖先元素transform/filter触发渲染层分离。
class类名怎么写才真正通用
直接用 .table 这种宽泛类名，很容易被项目里其他样式污染或覆盖。真正通用的前提是：命名有作用域、不依赖嵌套层级、不绑定语义结构。比如 .ui-table 比 .table 更安全；.ui-table--striped 比 .striped 更明确。
常见错误是把样式写成 table .cell 或 .table td，这会让复用时必须严格按 DOM 结构来——一旦换用 div 模拟表格或加了 wrapper 容器就失效。应该只对带 class 的元素本身设样式，例如：
.ui-table { border-collapse: collapse; width: 100%; }
.ui-table th,
.ui-table td { padding: 8px 12px; border: 1px solid #e0e0e0; }
如何让 hover、zebra、compact 等变体互不冲突
多个修饰类（modifier）必须设计成“开关式”，彼此正交。不能让 .ui-table--hover 依赖 .ui-table--striped 存在，也不能用 !important 强行覆盖。
-
.ui-table--hover只负责给tr:hover设背景色，不改 padding、border 等基础属性 -
.ui-table--striped只用tr:nth-child(odd)，不设 hover 效果 -
.ui-table--compact只调小padding和font-size，不碰边框或颜色
这样你就能自由组合：<table class="ui-table ui-table--striped ui-table--hover">，顺序无关，叠加有效。<h3>响应式断点怎么加才不影响通用性</h3>
<p>别在 <code>.ui-table 里直接写 @media (max-width: 768px) —— 这会把响应逻辑锁死在类名里，后续没法单独关闭或替换。正确做法是抽离出独立的响应式类，比如 .ui-table--responsive。
它只做一件事：在小屏下把表格转为滚动容器，并保持内部结构不变：
.ui-table--responsive {
display: block;
overflow-x: auto;
}
.ui-table--responsive > thead,
.ui-table--responsive > tbody,
.ui-table--responsive > tfoot {
display: table;
width: 100%;
}
/* 小屏下强制横向滚动，不破坏语义 */
@media (max-width: 768px) {
.ui-table--responsive {
width: 100%;
}
}
关键点：这个类不改字体、边框、hover 行为，只是“容器层”的行为切换，和其他修饰类完全解耦。
为什么 border-collapse: collapse 有时失效
最常踩的坑是父容器用了 transform、filter 或 will-change，导致浏览器开启图层分离，border-collapse 在某些渲染路径下被忽略。不是你的 CSS 写错了，是渲染上下文变了。
验证和修复方法：
- 打开 DevTools，选中
table元素，看 computed 样式里border-collapse是否为collapse - 如果值正确但视觉仍是 separated，检查祖先元素是否有
transform: translateZ(0)或filter: opacity(1) - 临时移除这些属性，确认是否恢复；若必须保留，可改用
outline或box-shadow模拟边框合并效果
通用类名不是写完就完事，它得在各种上下文里稳住表现——而边界情况往往藏在渲染层，不在 CSS 规则里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
