高内聚低耦合的less组件库需三层约束：根类名嵌套强制作用域、正交mixin拆分不混逻辑、构建路径显式配置不靠猜；缺一不可，否则导致全局污染。
直接说结论：高内聚低耦合的 Less 组件库，不是靠写得多，而是靠三层约束——根类名嵌套强制作用域、正交 mixin 拆分不混逻辑、构建路径显式配置不靠猜。缺一不可，少一个就全局污染。
每个组件必须用唯一根类名包裹，禁止裸选择器
Less 本身没有作用域，.button 编译出来就是全局生效的 CSS 规则。改一个按钮，所有页面的 button 标签都变形，不是 bug，是设计必然。
- 正确写法：
.ui-kit .button { .button-base(); .button-size(medium); }，所有样式都收束在.ui-kit下 - 禁止写：
button {}、.btn {}、&:hover（除非在 mixin 内部封装好） - 嵌套层级 ≤3 层，避免生成
.card .card__body .card__body-title这种长选择器，影响渲染性能 -
& + .sibling可以用，body &或html &会直接破坏隔离，一律禁用
mixins 必须正交拆分，拒绝“全能函数”
.btn(@size, @theme) 看似方便，实则是模块化幻觉。每次加个新尺寸或换主题，就得复制粘贴整段代码，变量覆盖、状态错乱、颜色失效全跟着来。
-
.button-size()只管height、padding、font-size三者联动，不碰颜色、边框、hover -
.button-state()封装:disabled、:hover等状态逻辑，用desaturate(@bg, 50%)而非硬写opacity: 0.5 -
.button-theme()显式接收@bg、@border、@text三个参数，不用contrast()推导——幽灵按钮文字色失效就是这么来的 - 所有 mixin 定义加
.__前缀，如.__button-base()，调用时再包一层外壳：.button() { .__button-base(); }
less-loader 的 paths 配置不到位，模块化就等于没做
写了规范的 mixin 和变量结构，但编译报 Cannot resolve variable @text-color？这不是 Less 的问题，是 Webpack 没找到你写的 variables.less。
-
@import "@/styles/variables"会失败，因为 Less 不走 Webpack 的resolve.alias - 必须在
less-loader的lessOptions.paths中显式声明：paths: [path.resolve(__dirname, "src/styles")] - 禁止跨组件
@import，比如button/index.less里不能@import "../../shared/mixins"——这会让所有引用 button 的页面都带上.clearfix - 每个组件只保留一个入口
index.less，且只@import当前目录下的文件，不向上穿透
真正难的不是怎么写 .button-size()，而是每次 @import 前，得确认它被谁引入、在哪个作用域生效、会不会把其他组件的变量悄悄覆盖掉。模块化不是语法糖，是纪律。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
