推荐使用带前缀的原子化边框工具类（如u-border），仅声明边框属性，分离粗细、颜色、圆角为正交类，支持响应式与暗色模式，避免耦合命名。
border 工具类命名如何避免与语义类冲突
直接用 border 作类名容易和未来组件内联样式或第三方库冲突（比如 Bootstrap 的 .border 默认是 1px solid #dee2e6）。更稳妥的方式是加前缀，例如 u-border（u- 表示 utility），或按项目规范用 tw-border（Tailwind 风格）、bd-（简写）。
关键不是叫什么，而是整套工具类必须「只声明边框相关属性」，不掺杂 padding/margin/color 等其他样式。否则后期调试时无法确定边框颜色来自 border-color 还是某个混合类。
-
u-border→border: 1px solid currentColor（推荐，复用文字色，语义清晰） -
u-border-0→border: none -
u-border-2→border-width: 2px - 避免
u-border-solid-blue-500这类“全包式”类名——它把线型、颜色、粗细耦合在一起，失去组合灵活性
颜色类必须独立且可叠加才能真正统一边框样式
边框颜色不该写死在 border 类里，而应由单独的颜色工具类控制，比如 text-blue-500 控制文字色，border-blue-500 控制边框色。这样你才能自由组合：u-border u-border-2 border-red-400 同时生效。
实现时注意两点：
立即学习“前端免费学习笔记（深入）”；
- 颜色类必须使用
!important吗？不需要。只要它的 CSS 选择器权重 ≥ border 类（比如都用单类名），且声明顺序靠后，就能覆盖——所以构建工具中确保颜色类 CSS 在 border 类之后加载 - 灰阶色值建议用 HSL 或自定义属性（
--color-border-muted: hsl(0 0% 70%)），方便暗色模式切换，而不是硬写#adb5bd - 支持透明边框：提供
border-transparent，等价于border-color: transparent，比写border: none更安全（保留边框占位，避免重排）
响应式边框工具类怎么写才不爆炸
响应式不是简单加个 @media 就完事。比如 md:u-border-0 在中屏及以上移除边框，但若同时存在 u-border 和 md:u-border-0，小屏有边框、中屏无边框——这没问题；但若误写成 u-border md:u-border，中屏就变成双倍边框（因为两个类都设了 border-width: 1px）。
正确做法是让响应式类「只覆盖需要变的部分」：
.u-border { border: 1px solid currentColor; }
.u-border-0 { border: none; }
@media (min-width: 768px) {
.md\:u-border-0 { border: none; }
.md\:u-border-2 { border-width: 2px; }
.md\:border-green-600 { border-color: #16a34a; }
}
注意：响应式类名中的冒号（:）需在 CSS 中转义为 \:，构建工具（如 PostCSS）通常自动处理；手写时别漏掉反斜杠。
border-radius 和 border 工具类能混用吗
可以，但必须明确「圆角不属于 border 样式本身」。所以 u-rounded、u-rounded-md 应归入「形状工具类」，和 u-border 平级，而非作为其子集。
常见陷阱：
- 写了
u-border u-rounded却发现圆角被裁切 → 检查父容器是否有overflow: hidden，或子元素是否设置了transform（某些浏览器下会破坏圆角渲染） -
u-border使用currentColor，但u-rounded不影响颜色，所以无需担心冲突 - 不要造
u-border-rounded这种复合类——它违背原子化原则，且一旦要改圆角大小就得新增一堆类
真正统一的边界控制，靠的是三组正交工具类：边框存在（u-border / u-border-0）、边框粗细（u-border-1 / u-border-2）、边框颜色（border-gray-300 / border-purple-500）。缺一不可，也少一个都不能叫「统一」。
