真·无用CSS需工具+人工交叉验证：Coverage面板仅限当前路径，须全站测试+PurgeCSS/UnCSS扫描，注意动态class、CMS内容及!important；按需引入需mini-css-extract-plugin或Vite原生支持；压缩禁用mergeLonghand等破坏性选项；第三方库需组件级CSS导入+SVG内联替代字体图标。
怎么判断哪些CSS是真·无用代码
浏览器不会主动告诉你哪条规则没被用过，得靠工具+人工交叉验证。Chrome DevTools 的 Coverage 面板能标出加载后未执行的样式行，但只反映当前页面路径下的渲染行为——单页应用切换路由、悬停态 :hover、媒体查询断点里的规则，它大概率会漏判。
真正靠谱的做法是：先跑一遍全站关键路径（含登录态、弹窗、响应式视口切换），再结合 PurgeCSS 或 UnCSS 扫描 HTML 模板和 JS 渲染结果。注意：PurgeCSS 默认不解析 import 和 @layer，若用了 Tailwind 的 @layer components 或动态 class 拼接（如 class={`${base}-text-${size}`}），必须手动配置 content 和 safelist。
- 别信“一键扫描完就删”，尤其当项目含 CMS 输出内容、用户自定义样式或第三方组件时
-
!important规则容易被误删，PurgeCSS 默认保留，但自定义正则若写错可能绕过 - Webpack 插件模式下，
mini-css-extract-plugin输出前才清理，开发时热更新看不到效果
按需引入 CSS 为什么不能只靠 import 拆分
单纯把 common.css 拆成 button.css、modal.css 并在组件里 import，对最终体积几乎没帮助——Webpack 默认把所有 CSS 合并进一个 main.css，除非你显式启用 CSS code splitting。
React/Vue 项目更常见问题是：样式随组件懒加载，但实际渲染时仍被提前注入。比如用 React.lazy 加载带 import './Dialog.css' 的组件，Webpack 会把 CSS 提取到初始包里，因为 style-loader 默认同步插入 标签。
- 要用
mini-css-extract-plugin替代style-loader，并开启splitChunks.chunks: 'all' - Vite 用户直接写
import './Card.css'即可，它默认对 CSS 做 code splitting - 注意 SSR 场景：服务端渲染时 CSS 不应按需加载，需用
critters或vue-head提取首屏关键 CSS
postcss-preset-env 和 cssnano 压缩时的坑
cssnano 默认启用所有优化，但某些压缩会破坏兼容性。比如 mergeLonghand 把 margin-top: 10px; margin-bottom: 10px; 合成 margin: 10px 0 10px;，看似省字节，但若原样式被 JS 动态读取 marginTop，计算值可能出错。
postcss-preset-env 的 stage 设置也影响体积：设为 3 会编译 gap、aspect-ratio 等新属性，但若目标浏览器已原生支持，反而多出一堆降级规则。
- 生产环境禁用
cssnano的mergeLonghand和normalizeWhitespace（后者会删掉注释，影响调试） - 用
browserslist精确声明支持范围，避免postcss-preset-env过度降级 - 压缩前先跑
stylelint，重复规则（如多个.btn { color: red }）比压缩更能减体积
第三方 UI 库的 CSS 怎么真正按需
像 element-plus 或 ant-design 的完整 CSS 包动辄 500KB+，只改 import 路径不够。例如 import 'element-plus/theme-chalk/index.css' 仍是全量；而 import 'element-plus/theme-chalk/button.css' 只有按钮样式，但前提是组件本身没隐式依赖 base.css 里的重置规则。
更麻烦的是图标字体或 SVG Sprite：很多库把所有图标打包进一个字体文件，哪怕只用了一个 el-icon-edit，整个 iconfont.woff 还是得下载。
- Ant Design 推荐用
babel-plugin-import+style: true，它会自动引入对应组件的 CSS，但需确认版本是否支持es目录 - Element Plus 官方提供
unplugin-vue-components自动导入 +unplugin-auto-import，CSS 按需靠resolver配置 - 图标类资源优先切 SVG 内联，或用
svg-sprite-loader合并使用到的图标，别碰字体方案
最常被忽略的一点：CSS 变量（--el-color-primary）和主题色生成逻辑本身会留在 JS 里，即使删了所有 CSS 文件，JS 包体积未必下降——得看构建时是否启用了主题静态提取。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
