Bootstrap 5 Utilities性能优化核心在于编译期控制：通过$spacers变量统一驱动所有间距类，修改一处即全链路生效；按需生成确保未配置的工具类（如text-underline）不输出CSS；默认!important保障嵌套中样式优先级，但需显式配置rules字段才生效。
Bootstrap 5 的 Utilities 不是“写得少就快”，而是通过编译期控制、按需生成和 CSS 变量协同，把性能优化落在具体可干预的环节上——你改一个 $spacers，所有 mt-*、px-* 都同步缩放，不用动 HTML；你关掉 text-decoration 工具类，CSS 文件里就真没这几十行规则。
Utilities 是编译期生成，不是运行时拼接
Bootstrap 5 的工具类全部由 Sass 在构建时展开，比如 mt-3 对应的就是 margin-top: 1rem 这一条静态声明，没有 JS 动态注入、没有 class 名运行时解析、不依赖 DOM 查询。这意味着：
- 浏览器加载完 CSS 就能直接渲染，无额外计算开销
- Tree-shaking 可生效：如果你没在
$utilitiesmap 中定义text-underline，它就不会出现在最终 CSS 里 - 所有响应式变体（如
mt-sm-2）都在编译时生成，不靠媒体查询运行时匹配
间距类复用同一套 $spacers 变量，改一处全链路生效
v5 把所有间距逻辑收口到 $spacers 这个 map 上，mt-3、pt-3、mx-3 全部引用同一个值。这带来两个实际好处：
- 主题定制时只需重定义
$spacers，不用逐个覆盖.mt-3、.p-4等 selector - 避免因多处硬编码导致的数值不一致（比如有人写
margin-top: 0.75rem，有人写padding: 12px） - 如果项目用 CSS 变量做动态主题切换，
--bs-spacer可被mt-3内部的 calc() 引用，但注意：纯 CSS 变量无法生成响应式断点类，仍需 Sass 编译
默认带 !important 是双刃剑，必须理解其生效前提
Bootstrap 5 的大多数 Utilities 默认加了 !important，这不是为了“压样式”，而是为确保它能在嵌套组件中可靠生效——比如 btn btn-primary mt-4 里的 mt-4 必须盖过 .btn > span 可能设的 margin。但这也意味着：
立即学习“前端免费学习笔记（深入）”；
- 你自定义的 Utility 类如果不显式写
rules: "margin-top !important"，就会被原生mt-*压住 -
!important会阻碍 CSS 层叠调试，建议只在真正需要覆盖第三方组件时使用，日常布局优先用结构层级或 Flex/Grid 控制流 - 如果你禁用
!important（通过$enable-important-utilities: false），则必须确保所有自定义 Utility 的选择器权重 ≥ 组件类，否则可能静默失效
真正影响性能的从来不是 class 数量，而是你是否清楚哪些类进了最终 CSS、哪些变量驱动了它们、以及 !important 在什么上下文里才必要——这些都藏在 $utilities map 和编译配置里，而不是 HTML 标签上。
