less工具类维护负担源于无约束、无隔离、无演进路径：全局类名泄漏html层，未限定作用域导致样式意外匹配，参数缺失或类型不一致引发静默失效，@import无序造成变量覆盖，须通过作用域限定、map参数、@import(reference)及统一入口收敛解决。
Less 封装工具类（如 .text-center、.p-4）看似提效，实际在中大型项目中常成为维护负担的源头——不是因为写多了，而是因为没约束、没隔离、没演进路径。
全局类名泄漏导致 HTML 层承担样式决策
把 .flex-center 直接写进 Vue 模板或 React JSX，等于把「如何居中」这个样式逻辑交给了使用方。一旦设计规范要求「所有卡片内图标改用 align-items: start」，你得全局搜 class="flex-center"，再逐个判断：这个居中是卡片头像？还是操作按钮组？还是弹窗标题？
- HTML 里出现
class="card__content flex-center"，说明组件边界已模糊；真正该做的，是在card.less里调用.flex-center(@direction: column) - 工具类若未加作用域限定（如
[data-role="card"] .flex-center），就可能被其他模块意外匹配，改一处，三处崩 - 无障碍审查失败常源于此：
.sr-only被滥用在非屏幕阅读器场景，但没人知道它在哪被引入
参数缺失或默认值不合理引发静默失效
一个 .margin(@size: @spacing-md) mixin 看似安全，但当某处调用 .margin() 漏传参数，而 @spacing-md 又被后续变量文件覆盖成字符串（如 @spacing-md: "0.75rem"），Less 编译器不会报错，但生成的 CSS 是 margin: 0.75rem; 还是 margin: 0.75rem 0.75rem;？完全取决于上下文，且无法静态检查。
- 常见错误现象：
.btn--lg在深色主题下文字变细，但控制台无报错——根源是.font-size(@scale)mixin 中@scale默认值为1，而主题变量里@font-scale-lg被定义为"1.25"（带单位字符串），乘法运算直接失效 - 正确做法：所有参数必须设默认值，且类型一致；避免
@size: @spacing-md这种间接引用，改用@size: 0.75rem或统一用 map 参数.margin(("size": "md")) - 构建时无法检测这类问题，只能靠人工 review 或自定义 stylelint 插件校验 mixin 调用完整性
@import 无序 + 工具类无版本标识，导致构建结果不可控
多个业务文件都 @import "utils/margin"，而这个文件又依赖 @spacing-sm，但 variables.less 的导入顺序由 Webpack resolve.alias 或文件加载顺序决定。A 页面先加载基础变量，B 页面却因路由懒加载后置，导致 @spacing-sm 取到的是旧值。
- 错误日志往往只显示
Cannot access property 'value' of undefined，不指明是哪个 mixin 哪个变量出问题 - 解决方案不是禁用工具类，而是切断隐式依赖：
utils/margin.less改为utils/margin/index.less，内部用@import (reference) "variables"显式声明，且不输出任何 CSS - 所有工具类入口必须通过统一
styles/index.less导入，禁止业务文件直引深层路径；Webpack 别名配置resolve.alias["@utils"] = "src/styles/utils"，强制路径收敛
真正难维护的从来不是「有没有工具类」，而是「谁在用、在哪用、为什么这么用」完全不可追溯。Mixin 不输出 CSS、变量不裸奔、类名不越界——这三条守住了，工具类才真省事。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
