Less需通过命名规范、作用域控制和编译期检查防御样式风险：①变量覆盖须用!default且仅在顶层文件修改；②禁用深层嵌套与隐式全局选择器，优先BEM；③用guard配合类型检测避免非法CSS；④第三方场景须用HTML属性隔离scope。
Less 本身不提供运行时防御机制，但通过命名规范、作用域控制和编译期检查，能显著降低样式意外覆盖或失效的概率。
用 !default 安全覆盖变量值
直接重写全局变量（如 @primary-color）容易引发下游组件样式错乱。应始终用 !default 声明默认值，并只在顶层配置文件中覆盖。
- ✅ 正确：在
variables.less中写@primary-color: #007bff !default;；在theme-overrides.less中写@primary-color: #28a745; - ❌ 错误：在任意组件里写
@primary-color: #dc3545;—— 后续引入的模块会继承这个值，且无法回退 - 注意：
!default只在变量未被赋值过时生效，重复声明无警告，建议配合注释说明“此变量仅应在 theme.less 中修改”
避免隐式全局选择器污染
Less 的嵌套语法易导致意外生成高权重或宽泛选择器，比如 .btn { &__icon { ... } } 编译后是 .btn .btn__icon，若页面中已有 .btn__icon 独立存在，就可能被误匹配。
- 优先使用 BEM 风格的显式类名，如
.btn-icon而非依赖嵌套生成的后代选择器 - 禁用无限制的嵌套层级：超过 3 层（如
.card { .header { .title { ... } } }）应拆分为独立规则，避免生成.card .header .title这类脆弱选择器 - 慎用
&:hover等伪类嵌套在深层结构里——它会让 specificity 突然升高，后期极难用普通类名覆盖
用 guard 条件判断规避无效样式
当变量取值不确定（如主题色可能为空），直接插值会导致生成非法 CSS（如 color: ;）。Guard 可在编译期拦截错误分支。
.text-primary() when (iscolor(@primary-color)) {
color: @primary-color;
}
.text-primary() when not (iscolor(@primary-color)) {
// 编译时静默跳过，不输出 color 声明
}
-
iscolor()、isnumber()、isstring()是 Less 内置类型检测函数，必须搭配 guard 使用 - 不能用于运行时判断（CSS 无运行时），只影响编译结果是否生成某段 CSS
- 常见坑：guard 表达式里不要调用未定义变量，否则编译失败而非跳过
导出样式前做 scope 隔离
第三方组件或微前端场景下，样式泄漏是崩溃主因。Less 没有原生 scoped 功能，但可通过 html[data-theme="xxx"] 或命名空间包裹实现隔离。
- 推荐方式：在入口 Less 文件顶部加
html[data-ui="v2"] { ... }，所有样式嵌套其下，确保只对带该属性的页面生效 - 避免用
:global()除非明确需要穿透（如覆盖第三方库），且必须加注释说明原因 - 警惕
@import顺序：被隔离的样式块若 import 了未隔离的变量文件，可能把全局变量带进来，破坏隔离效果
真正危险的不是语法错误，而是那些编译能过、浏览器能渲染、但逻辑上已悄悄覆盖了别处样式的“安静崩溃”。变量作用域、选择器生成路径、类型校验时机——这些才是 Less 工程中防御性编码的关键卡点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
