CodeGeex 支持 CSS 冗余分析，仅 codegeex-4-all 和 codegeex-4-css 版本具备伪类依赖识别与特异性链路分析能力；旧版 codegeex-3 会误删 :hover/:focus 等交互样式。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
你需要从一个包含大量重复、覆盖、未使用选择器的 CSS 文件中精准识别冗余样式，并生成语义清晰、可维护的重构结果，而不是简单删除或手动合并。
确认 CodeGeex 是否支持 CSS 冗余分析
访问 https://codegeex.cn → 登录账号 → 进入「Model Playground」→ 在模型列表中查找 【codegeex-4-all】 或 【codegeex-4-css】（仅这两个版本明确支持 CSS 语义理解与样式链路分析）。
旧版 codegeex-3 不解析 :hover/:focus 等伪类依赖关系，会导致误删关键交互样式。
准备待重构的 CSS 文件
将原始 CSS 文件保存为 UTF-8 编码（BOM 必须关闭），文件名不含中文或空格，例如 styles_v1.css。
立即学习“前端免费学习笔记（深入）”；
在文件顶部添加注释行：// @codegeex: analyze redundancy + preserve specificity chain。这会触发模型启用 CSS 特异性继承图谱分析模式，否则它默认按 JS 逻辑处理，可能错误合并 .btn.primary 和 .primary.btn。
提交分析请求并设置提示词
方法一：使用 Web Playground
粘贴完整 CSS 内容 → 在 Prompt 输入框中写入：
你是一名资深前端架构师。请逐条识别以下 CSS 中所有满足任一条件的选择器：① 被后续同名规则完全覆盖且无 specificity 差异；② 声明的所有属性在父级或更广作用域中已被定义且未被 override；③ 选择器在当前项目 HTML 中无任何匹配元素（基于 class/id/标签名静态推断）。输出格式：[REMOVED] .old-header { ... } → [REPLACED] .header { ... }，不加解释性文字。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
方法二：调用 API（需开通 Pro 权限）
POST 到 https://api.codegeex.cn/v4/chat/completions，body 中设置：【"model": "codegeex-4-css", "temperature": 0.1, "max_tokens": 2048】，messages 数组第二项 role=“user”，content 为上述 prompt + CSS 内容。
验证重构结果的三步校验法
第一步：比对 specificity 值
对每个被标记为 [REPLACED] 的规则，用浏览器开发者工具 Elements 面板右键「Reveal in Elements Panel」→ 检查计算样式中该选择器是否仍生效；若 specificity 下降导致样式丢失，说明模型误判了层叠顺序。
第二步：运行覆盖率检测
执行 npx purgecss --css styles_refactored.css --content "**/*.html" --output ./cleaned/，若输出中出现大量「unused」类但原文件中已删除，则证明 CodeGeex 漏判了动态 class 绑定（如 Vue 的 :class="{ active: isActive }"）。
第三步：检查媒体查询嵌套完整性
若原 CSS 含 @media (min-width: 768px) { .card { display: grid; } }，重构后该块必须整体保留或迁移至对应断点区块；【CodeGeex 默认不跨媒体查询合并规则，切勿信任其自动折叠@media块】。
