现代化打包工具不直接剪枝css类名继承树，该任务由css预处理器、css-in-js库或专用优化工具（如lightningcss、postcss插件）承担；关键在于构建时的作用域分析与死代码消除，需结合引用追踪、静态标记与可观测性验证。
现代化打包工具本身不直接处理 CSS 类名的继承树剪枝——这是 CSS 预处理器、CSS-in-JS 库或专门的 CSS 优化工具（如 css-tree、lightningcss、esbuild 的 CSS 插件）的职责。所谓“深层嵌套的 class 继承树”，通常指 Sass/Less 中多层嵌套生成的冗余选择器，或 React/Vue 中动态生成的、未被实际使用的 class 名字链（例如 Banner__title--large--dark 这类 BEM 变体）。真正的“剪枝”发生在构建时的 CSS 作用域分析与死代码消除阶段，而非打包器核心逻辑。
识别并标记未使用的嵌套 class
关键前提是：工具必须知道哪些 class 在运行时真正被挂载/激活。仅靠静态分析无法可靠判断 .card .header .title:hover 是否会被触发。
- 使用 Webpack + css-loader + mini-css-extract-plugin 时，启用
exportOnlyLocals: true并配合css-modules-typescript-loader，可让 TypeScript 类型系统协助推导哪些 class 被引用 - 在 Vue 或 React 中，用 babel-plugin-react-css-modules 或 vite-plugin-css-class-converter 将 class 引用转为静态字符串字面量，便于后续工具扫描
- 对 Sass 文件，启用
dart-sass --embed-sources --source-map并保留原始嵌套结构注释（如// @used .button--primary），供后续插件提取标记
用 PostCSS 插件做语义化剪枝
PostCSS 是最灵活的介入点，可基于 AST 精准删除无引用的嵌套分支，而非简单压缩选择器。
-
postcss-unused：需配合 JS 模块中
import styles from './Button.module.css'的引用关系，识别出.Button__icon--hidden这类未被styles.iconHidden调用的 class -
postcss-purgecss（配置
content为所有 JSX/TSX/Vue 文件）：能剔除.modal .overlay .backdrop::before这类完整路径中未出现的中间节点，但需注意伪类/属性选择器可能被误删 - 自定义插件示例：遍历
Rule节点，对.a .b .c .d这类四级以上嵌套，检查其每个层级是否独立出现在 HTML 模板或 JS 字符串中；若.c从未单独出现，则整条链视为可疑，标记待人工复核
利用构建时 CSS Scope 分析替代运行时继承
与其剪枝“继承树”，不如从源头避免深层嵌套——现代方案倾向用原子化或作用域隔离替代 CSS 层叠。
- Vite / Webpack 中接入 unocss 或 windi css，将
class="mt-4 p-2 text-sm font-bold"编译为扁平原子类，天然规避嵌套继承问题 - 启用 CSS Modules 的 composes 时，避免写
.variant { composes: base from './Base.module.css'; }再嵌套.variant:hover，改用:global(.variant):hover显式声明，使依赖关系可追踪 - 对于组件库（如 MUI、Ant Design），关闭
legacyCssClasses: false（若支持），启用skipLibCheck和cssVars模式，让主题变量驱动样式，而非 class 继承链
验证剪枝效果与回退机制
剪枝错误会导致样式丢失，必须有可观测性和快速恢复能力。
- 构建后运行 puppeteer + axe-core 扫描页面，比对剪枝前后 DOM 中
class属性差异，高亮缺失 class 对应的视觉区域 - 在 CI 中启用
npm run build -- --analyze（配合webpack-bundle-analyzer+critical插件），查看 CSS 资源中各 selector 的引用频次热力图 - 保留原始 CSS sourcemap，并配置
/* purgecss ignore */注释区块，对第三方 UI 组件的复杂嵌套（如react-datepicker）跳过剪枝
