用途:审查样式表、组件样式与响应式状态,发现并移除未使用的 CSS 规则,从而减小 bundle 体积、改善加载时间。
主要能力:依据资料,检查项建议使用 PurgeCSS、UnCSS 或 Chrome DevTools Coverage 识别未使用 CSS;修复方式是在构建流程中自动移除未使用 CSS,并定期审计样式文件以清理死代码。资料给出的快速参考包括:用 PurgeCSS 或 UnCSS 移除未使用的选择器;集成到构建管线(Webpack、Vite、PostCSS);将动态类名和框架特定模式加入 safelist;对使用 CSS 框架的项目典型缩减为 50-90%。描述称多数项目仅使用 10-25% 的 CSS,去除其余部分可削减 bundle 体积 75% 以上。
使用方式:在代码评审中检查相关样式表、组件样式与响应式断点,标出在渲染 UI 中违反该规则的具体选择器、声明或断点;随后在构建流程中实施自动化的未使用 CSS 移除并定期审计。
适用场景:审查与优化项目 CSS、使用 CSS 框架、需要减小体积与提升加载性能的前端工程。
限制:资料未提供具体配置代码、各框架的完整实现细节、工具安装命令、版本要求、价格或效果承诺,完整实现细节与代码示例见 references/rule.md 及规则页面 https://frontendchecklist.io/rules/css/unused-css。