应直接写标准 CSS 语法并由 Autoprefixer 补前缀，禁用 .flex() 等拼接前缀的 Mixin；工具类按属性直译命名（如 .d-flex）；响应式类用 each() 遍历断点 map 生成；确保 browserslist 与实际兼容需求一致。
别用 .flex() Mixin 自动生成 display: flex
Autoprefixer 只在 CSS 字符串层面补前缀，而 Less 编译期拼出来的 display: -webkit-flex 或 display: -ms-flexbox 不仅过时（Chrome 120+ 已废弃），还会让 Autoprefixer 跳过整条规则。更糟的是，它和你手写的 IE10/11 兼容代码冲突——比如 display: -ms-flexbox 必须出现在 display: flex 之前，但 Mixin 无法保证顺序。
正确做法是直接写标准语法，靠构建链路补前缀：
- Less 文件里只写
display: flex、justify-content: center等现代属性 - 确保 Webpack 配置中
less-loader→postcss-loader（含autoprefixer）→css-loader顺序严格 -
postcss-loader的options.postcssOptions.plugins必须显式写成[require('autoprefixer')]，不能传字符串数组
用 @supports 封装降级逻辑，而不是 Mixin
Mixin 是编译期静态生成，没法做运行时特性检测。把 place-items: center 塞进 .flex-center() 里，IE 和旧 Android 直接报错或忽略——因为它们根本不认识这个属性。
真正安全的降级必须由 CSS 自己完成：
立即学习“前端免费学习笔记（深入）”；
- 外层写 IE10/11 必需的三段式声明：
display: -ms-flexbox→display: flex - 现代属性统一放进
@supports (place-items: center)块内 - 不要在 Mixin 里拼
calc()表达式，Less 不执行运行时计算，calc(100% / 3)会直接报Operation error
示例：
.flex-center {
display: -ms-flexbox;
display: flex;
@supports (place-items: center) {
place-items: center;
}
}
工具类命名要直白，避免语义混淆
像 .flex-1 这种名字容易误解为“启用 flex”，实际想表达的是 flex: 1。更危险的是 .flex-row，它既可能指 flex-direction: row，也可能被当成“一行布局”的语义类，后期维护时极易歧义。
推荐按 CSS 属性名直译，加前缀区分作用域：
-
.d-flex→display: flex -
.jc-center→justify-content: center -
.ai-stretch→align-items: stretch -
.fw-wrap→flex-wrap: wrap
这样一眼看懂含义，也方便后续用 postcss-custom-properties 或 CSS 自定义属性替换。
响应式工具类必须用 each() 遍历断点 map
手写 @media (min-width: 768px) { .jc-md-center { ... } } 三次？一旦新增 xl 断点，就得翻遍所有文件补漏。Less 的 each() 是唯一能保证一致性的方式。
关键点：
- 定义断点 map：
@breakpoints: (sm: 576px, md: 768px, lg: 992px); - Mixin 内遍历生成：
.make-flex-props(@prop, @val, @breakpoint-map) { each(@breakpoint-map, { .@{key}-@{prop}-@{val} { @media (min-width: @@value) { @{prop}: @{val}; } }); } - 调用：
.make-flex-props(jc, center, @breakpoints);—— 一次性产出所有断点下的类
注意：Less 3.5+ 才支持 each()；低于此版本只能用递归变量拼接，但调试成本高、易出错。
最容易被忽略的是：你删了 browserslist 里的 IE11，但代码里还留着 display: -ms-flexbox —— 它不会自动消失，也不会被 Autoprefixer 清理。兼容性不是写出来就完事，是整个构建链路的事。
