靠全局重置（all: unset）和命名空间隔离（如.html.brand-x下限定选择器）解决多品牌CSS冲突，变量分框架级、品牌级、实例级三层管控，BEM修饰符转为品牌开关，PostCSS插件按配置注入差异样式。
怎么让不同品牌商的按钮、输入框在同一个CSS框架里不打架
靠全局重置和命名空间隔离。不是靠“统一设计语言”这种虚的，是靠具体规则压住样式优先级冲突。
常见错误现象：button 样式被某品牌商的 .brand-a-btn 覆盖，但另一家的 .brand-b-button 又漏掉圆角；或者 input[type="text"] 的 border 在 A 品牌下是 1px，B 品牌下被强制设成 2px 且没留钩子改。
- 所有基础组件（
button、input、select）必须用all: unset或极简 reset 开头，清掉浏览器和各品牌自带的默认样式 - 每个品牌商的样式包必须包裹在唯一类名下，比如
.brand-x，且该类名必须出现在 HTML 根元素上（），不能只加在局部容器里 - 禁止直接写
button { ... }，一律用.brand-x button或.ui-button.brand-x这类带上下文的选择器
CSS变量怎么分配才不会让品牌商互相污染
变量不是越多越好，而是按“可覆盖层级”分三档：框架级（不变）、品牌级（每家一份）、实例级（运行时 JS 注入）。
使用场景：A 品牌要蓝灰主色，B 品牌要橙黑，但都共用同一套 spacing-xs、radius-sm 等基础尺寸变量。
- 框架级变量写在
:root，只包含--spacing-*、--font-size-*这类纯度高的基础值，不出现颜色或阴影 - 品牌级变量必须用
[class*="brand-"]或.brand-x作用域限定，例如.brand-a { --color-primary: #0066cc; } - 避免在 CSS 里用
var(--color-primary)直接赋给button，而是通过中间变量解耦：button { background: var(--btn-bg, var(--color-primary)); }，给品牌商留出覆盖入口
为什么用 BEM 会卡在多品牌落地这一步
因为 BEM 默认假设“一个项目一套语义”，而多品牌场景下，btn--primary 对 A 品牌是填充蓝底白字，对 B 品牌却是描边橙字——语义相同，视觉完全相反。
错误做法：让各品牌都写自己的 .btn--primary，结果编译后 CSS 文件体积翻倍，且无法做原子化复用。
- 把 BEM 的修饰符（
--*）转为“品牌开关”，例如.btn--brand-a和.btn--brand-b是互斥的，HTML 上只能存在其一 - 基础块名（如
.btn）只负责布局和交互状态（:hover、:disabled），所有视觉表现交给品牌修饰符驱动 - 禁止嵌套过深：
.btn--brand-a .btn__icon--small这种写法会让 B 品牌无法单独控制图标大小，应改为.btn--brand-a .btn__icon+--icon-size变量
PostCSS 插件怎么自动注入品牌专属规则而不手动改源码
靠 postcss-custom-properties + 自定义插件读取品牌配置 JSON，在构建时把变量映射成对应选择器块，不是靠 JS 动态插入 style 标签。
性能影响：如果每个品牌都生成完整 CSS，文件体积会膨胀；正确做法是只生成差异部分，再用 @import 或构建时合并。
- 配置文件示例：
brands/a.json包含{"colorPrimary": "#0066cc", "fontFamily": "HarmonyOS Sans"} - 插件遍历所有品牌配置，输出类似
.brand-a { --color-primary: #0066cc; --font-family-base: "HarmonyOS Sans"; }的 CSS 片段 - 关键点：插件必须在
postcss-preset-env之前执行，否则自定义变量会被提前编译掉；且输出的 CSS 必须放在所有组件样式之前，否则变量不可见
事情说清了就结束。真正难的不是写多少规则，而是让品牌方接受“你不能直接改 button，得走 --btn-bg 变量”——这个协作边界，比技术方案更需要提前对齐。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
