应使用[data-scope="admin-layout"]锚定后台管理专属作用域，所有样式规则必须以此为前缀，如[data-scope="admin-layout"] .ant-btn、[data-scope="admin-layout"] table，并配合子代选择器>和BEM命名确保精准控制与边界隔离。
用[data-scope]锚定后台管理专属作用域
后台管理系统（如基于 Ant Design 或自研框架）最怕全局样式被运营页、CMS 插件或第三方报表组件污染。直接写 .ant-btn 或 table 会立刻影响所有页面，包括弹窗、嵌入 iframe 和服务端渲染的静态报表。解决方案不是禁用这些选择器，而是给它们加一层“围栏”：[data-scope="admin-layout"]。
在根容器（比如 <div id="root" data-scope="admin-layout">）上声明该属性，后续所有关键规则都必须以此为前缀：
-
[data-scope="admin-layout"] .ant-btn—— 只影响后台页内的 Ant Design 按钮，不碰运营后台的同名组件 -
[data-scope="admin-layout"] table—— 重置表格默认边距/边框，但不会波及富文本编辑器里插入的<table> -
[data-scope="admin-layout"] [class^="hljs-"]—— 安全匹配代码块高亮类，避免因 highlight.js 升级导致.hljs-table→.hljs-td失效
注意：data-scope 值必须唯一且稳定，不能动态生成或由 JS 删除——否则样式瞬间失效。它不是“开关”，而是“地理边界”。
禁止后代选择器，改用 BEM + 子代选择器 > 精准控制菜单和表单
后台系统中多级菜单、复杂表单、折叠面板极易因选择器穿透而错乱。例如 .menu .submenu 会命中所有嵌套层级，导致三级菜单位置被二级规则覆盖；.form .input 会让侧边栏搜索框也套上主表单的 padding。
立即学习“前端免费学习笔记（深入）”；
正确做法是切断继承链：
- 菜单层级用
#admin-menu > .submenu（一级）、#admin-menu > .submenu > .submenu（二级）——WordPress 和多数 CMS 生成的 HTML 中，.submenu总是直接子元素，>匹配稳定 - 表单元素统一走 BEM：
.user-form__field、.user-form__submit，禁止写.user-form .field——后者一旦父容器类名被 JS 动态移除（比如切换 tab），样式就丢失 - 状态修饰符只绑定基础类：
.button--loading合法，.button__icon--hidden违反 BEM，应改为.button__icon--invisible或合并到 block 级状态：.button--loading .button__icon
子代选择器 > 不依赖 class 名唯一性，只认 DOM 物理结构，比任何 class 组合都可靠。
CSS Modules 里仍要防标签选择器泄漏
开了 modules: true 并不等于免疫污染。Button.module.css 中写 img { max-width: 100%; }，构建后仍是全局 img 规则——CSS Modules 只哈希类名，不处理标签、伪元素、属性选择器。
实操建议：
- 所有模块文件中，禁用裸
div、img、button、input规则；必须包裹在作用域内：[data-scope="admin-layout"] img或.admin-layout__content img - 用
:global()要极度克制：:global([data-scope="admin-layout"] .ant-input)可接受，:global(.ant-input)等于开后门 - CI 流程中接入
postcss-safe-parser，配置拦截未包裹的标签选择器，提交即报错
真正危险的不是某一行 img，而是团队里有人觉得“就调个头像圆角，用标签最省事”——这种习惯一旦蔓延，Modules 就形同虚设。
第三方组件（如 Ant Design）如何不破沙箱
你无法改 Ant Design 的源码，但可以框住它。直接写 .ant-btn 是主动放弃控制权；靠 .admin-layout .ant-btn 又太脆弱（万一 layout 类被 JS 移除？）。
更可靠的组合策略：
- 外层容器加
data-scope：<div data-scope="admin-user-management">...</div> - 配合属性选择器限定：
[data-scope="admin-user-management"] .ant-btn - 必要时叠加 BEM 修饰：
[data-scope="admin-user-management"] .ant-btn.admin-btn--primary，再通过 JS 动态添加admin-btn--primary类 - 对
dangerouslySetInnerHTML渲染的内容，用前缀匹配兜底：[data-scope="admin-article"] [class^="markdown-"]
重点不是让第三方“听话”，而是确保它的样式出不去、外面的样式进不来——data-scope 是物理边界，BEM 是语义锚点，二者缺一不可。
