后台管理系统CSS需限定作用域，核心是命名空间+容器隔离：第三方库加namespace（如ElementPlus设admin）、自定义样式包裹.admin-layout前缀、禁用裸类名；构建时用postcss-prefix-selector自动加前缀，微前端启用strictStyleIsolation。
后台管理系统引入 CSS 时，不能靠“加个 link 或 import 就完事”，否则前台样式（比如主站的 reset.css、Ant Design 全局类）大概率会覆盖后台组件的按钮、表单、表格等基础样式——这不是权重没调好，是浏览器根本不管你是后台还是前台，CSS 就是全局解析的。
为什么直接 import './admin.css' 会污染前台？
因为构建工具（Vite/webpack）把 import 编译成 <link> 或 <style></style> 插入 ，而前台页面也共享这个 。一旦后台用了 .btn、.table 这类泛用类名，又没加命名空间，前台的同名样式就会被覆盖或反向覆盖。
- 常见错误现象：
Button在后台里边框变粗、字体变小，但前台正常；控制台查元素发现两个.btn规则都生效了，后加载的赢了 - Vue SFC 的
<style scoped></style>只处理本组件内<style></style>标签，对@import 'element-plus/theme-chalk/index.css'完全无效 - CSS-in-JS（如 styled-components）若未启用 SSR 或未配置
StyleSheetManager，服务端渲染出的 style 标签仍进全局 head
如何让后台 CSS 真正作用于后台容器内？
核心不是“阻止加载”，而是“限定作用域”。推荐组合使用：命名空间 + 构建时前缀 + 容器级隔离。
- 所有第三方 UI 库必须加命名空间：
ElementPlus初始化传{ namespace: 'admin' }，类名变成admin-button；Ant Design需重写prefixCls并配合 less 变量@ant-prefix: admin - 自定义 CSS 必须包裹在容器选择器下：
.admin-layout .admin-table { ... }，禁止出现裸.table或table元素选择器 - 构建阶段用
postcss-prefix-selector自动给所有规则加前缀（注意排除:global()和@keyframes） - 如果后台是独立子应用（如 qiankun 微前端），启用
strictStyleIsolation: true，但要确保所有 DOM 操作走shadowRoot.querySelector，否则 JS 找不到元素
link rel="stylesheet" 和 import 在后台项目中怎么选？
二者本质相同，都生成全局 <link> 或 <style></style>，区别只在构建介入时机。关键看是否可控。
立即学习“前端免费学习笔记（深入）”；
-
import更安全：能被css-loader+postcss-loader接管，支持@import解析、变量替换、前缀补全；适合需要动态主题或环境变量注入的场景 -
<link>更脆弱：硬编码路径，构建哈希无法自动同步，多环境易 404；仅适合极简后台（无构建流程）或 CDN 托管的稳定 CSS 包 - 绝对禁止在 HTML 模板里写
<link href="/css/admin.css">—— 前端构建产出的文件名带哈希（如admin.7d2a9f.css），后端模板无法动态替换
后台 CSS 文件路径 404 怎么快速定位？
构建产物里的 <link href="/css/admin.xxx.css"> 路径和实际部署路径不一致，是最隐蔽的样式失效原因。
- 检查
dist/index.html中所有<link href> 的值，确认它和你部署目录结构完全匹配（例如部署在 <code>/admin/下，则路径应为/admin/css/admin.xxx.css） - Vite 用户：设置
build.base = window.__POWERED_BY_QIANKUN__ ? '/admin/' : '/'；Webpack 用户：设置publicPath为运行时动态值 - 如果后台是嵌入式 iframe 或微前端子应用，还要核对主应用注册时的
entry字符串，必须和build.base/publicPath输出路径一致
真正难的不是加前缀或套容器，而是所有团队成员对“后台样式不得裸写类名”形成肌肉记忆——一旦有人提交了没包 .admin-xxx 的 PR，污染就从那一刻开始，且很难回溯。
