Bootstrap 5的Utility类比内联style更优，因其天然支持响应式断点、自动适配CSS变量与主题切换、避免选择器冲突、可被PurgeCSS安全剔除，且为声明式原子化契约而非命令式快照。
class 比 style 更好用，不是因为“更高级”，而是因为 Bootstrap 5 的 Utility 类（比如 text-center、bg-primary、px-3）在设计上就解决了内联样式在真实项目中必然遇到的几个硬伤。
Utility 类天然支持响应式断点
你没法在 style="text-align: center" 里写“只在中屏以上居中”——但 text-center 默认生效，text-md-start 就能精准控制中屏及以上左对齐。
Bootstrap 把所有 Utility 都按 xs/sm/md/lg/xl/xxl 断点做了前缀扩展，背后是统一的 @media (min-width: 768px) 等规则。手动写内联样式时，你得自己拼 style 属性 + 媒体查询脚本，既不可读也不可维护。
Utility 类自动适配 CSS 变量和主题切换
当你改了 :root { --bs-primary: #5a6fd8; }，所有用到 bg-primary、border-primary、text-primary 的地方立刻同步变色；而 style="background-color: #0d6efd" 是死值，换主题就得全局搜索替换。
更关键的是：如果你只改 --bs-primary 没同步改 --bs-primary-rgb，bg-primary 仍能正确渲染阴影和半透明叠加（因为内部用了 rgba(var(--bs-primary-rgb), .5)），但内联写死的 #0d6efd 完全不参与这套链式计算。
Utility 类避免重复定义和选择器冲突
常见错误现象：
• 多个组件都写了 style="margin-bottom: 1rem"，结果某处漏加，间距不一致；
• 后续加了个 .card { margin-bottom: 2rem !important }，把所有内联 margin-bottom 全覆盖了，排查困难。
Utility 类本质是原子化 class，每个只干一件事，且优先级可控（Bootstrap 5 的 Utility 类默认权重比普通 class 高，但低于 !important）。你不需要操心“谁赢谁输”，只要按需组合：mb-3 mb-md-4 就是明确的意图表达。
Utility 类可被 PurgeCSS 安全剔除
构建时，工具能准确识别哪些 class 实际被用到了（比如只用了 fw-bold 和 fst-italic），把没用的 fw-light、fst-normal 全删掉；而内联样式是字符串拼接出来的，PurgeCSS 看不见、不敢删，最终打包体积反而更大。
注意：如果用 JS 动态拼 className（如 cls = 'p-' + size），Utility 类也会失效——这时候就得退回到自定义 class 或 CSS 变量方案。
立即学习“前端免费学习笔记（深入）”；
真正难的不是“要不要用 Utility 类”，而是理解它和内联样式根本不在同一抽象层级：一个是声明式、可组合、可推导的样式契约，另一个是命令式、孤立、不可追踪的样式快照。项目越往后，这种差异越明显。
