Codex 修 CSS bug 的流程：新手项目练习边界

CSS bug 看起来适合新手项目练习，但真正的风险在于范围容易变大。客户说“按钮错位”，可能只是一个断点问题，也可能牵涉布局系统、组件库、全局样式、浏览器兼容或设计稿不一致。Codex 可以帮你找线索，但不能替你确认验收标准。

这篇仍是草稿。发布前需要人工补充真实前后截图、浏览器测试记录和报价案例。

适合谁

适合已经会打开页面、查看元素、运行本地项目，并能用 Codex 辅助分析样式文件的新手。你不需要一次掌握复杂 CSS 架构，但需要能复现问题、保存截图、检查改动范围。

也适合准备接小型前端修复单的人。CSS 小单可以练习沟通和交付，但前提是客户愿意提供页面链接、截图、预期效果和验收方式。

不适合谁

不适合只凭一句“样式坏了”就报价的人。也不适合不会看移动端、不会对比浏览器、不会确认设计稿来源的新手。

如果任务已经包含整站 UI 重做、设计系统重构、复杂动画、无障碍审查、性能优化或品牌视觉改版，就不再是简单 CSS bug。需要重新定义范围和报价。

先收集哪些材料

修 CSS bug 前至少要问清楚这些信息：

1. 出问题的页面链接或截图。
2. 具体浏览器和设备，比如桌面 Chrome、手机 Safari。
3. 出问题的屏幕宽度或机型。
4. 预期效果：客户希望它看起来怎样。
5. 是否有设计稿、原始截图或参考页面。
6. 是否允许在测试分支或预览环境修改。
7. 验收标准：截图一致、响应式正常，还是某个组件不再溢出。

没有预期效果时，不要把“我觉得好看”当成交付标准。

具体步骤

1. 保存问题截图和页面路径。
2. 本地或预览环境复现问题，记录浏览器和宽度。
3. 用开发者工具定位受影响元素、样式来源和父级布局。
4. 让 Codex 帮你解释相关 CSS，但不要让它一次重写全局样式。
5. 先做最小改动，只修当前问题。
6. 检查相邻组件、移动端和桌面端是否被影响。
7. 运行 lint、build 或项目已有检查。
8. 交付前后截图、修改文件、验证宽度和未覆盖范围。

可以复制的诊断记录

CSS bug 诊断记录

页面链接：
问题截图：
浏览器：
屏幕宽度：
受影响组件：
相关文件：
预期效果：
已修改内容：
已验证宽度：
可能影响范围：
需要客户确认：

常用本地检查：

git status
git diff
npm run lint
npm run build

如果项目没有自动化测试，至少保留手动截图和浏览器宽度记录。

报价时怎么拆

CSS bug 可以先按诊断和修复拆开。诊断阶段确认复现、定位文件、判断影响范围。修复阶段才修改代码、跑检查、交付前后截图。

如果客户希望你顺便调整多个页面、重做响应式、统一视觉、修复旧浏览器兼容，就要拆成多个任务。不要把“一个按钮错位”的报价套到“整站样式整理”上。

一个适合新手的例子

比较适合新手处理的 CSS bug，是客户提供了一个页面截图：手机宽度下按钮文字换行，桌面端正常。你可以要求客户补充浏览器、机型、页面链接和预期截图，然后在本地或预览环境复现。

修复时先定位按钮组件和父级布局，检查是否是宽度、间距、flex、grid、字体大小或换行规则导致。让 Codex 帮你解释相关样式可以，但不要让它一次重写整页。改完后分别截图手机宽度和桌面宽度，确认没有影响相邻区域。

不适合新手直接处理的例子，是客户说“整个网站移动端都不好看”，但没有设计稿、没有页面优先级、没有验收标准。这不是一个 CSS bug，而是响应式重构或视觉整理，需要拆范围。

交付说明怎么写

交付说明应该包括：问题复现条件、修改文件、关键 CSS 变更、验证过的屏幕宽度、前后截图和未覆盖范围。不要只写“fixed”，客户看不到你验证了什么。

如果只在本地验证，说明预览或生产环境还需要客户确认。如果需要客户登录设计工具、CMS 或部署平台，放进客户侧待办，不要把未授权动作算进已完成交付。

风险提醒

不要为了修一个 bug 改全局 reset、主题变量或组件库核心文件。不要删除原有响应式规则来制造短期正常。不要使用未授权设计稿或图片作为公开案例。

如果客户需要你登录 CMS、部署平台、设计工具或私有仓库，先记录为客户侧授权事项。授权完成前，只做诊断范围，不要承诺完整交付。

明日待办

• 补充一个匿名 CSS bug 前后截图。
• 准备移动端、桌面端和常见浏览器的验收清单。
• 人工核对平台规则和客户素材授权边界。
• 写一份客户侧授权清单：仓库、预览链接、设计稿、测试账号。

可以继续看的内容

• 报错解释器
• 项目报价助手
• 模板下载

免责声明

本文仅供学习和项目判断参考，不构成财务、法律或职业建议。涉及客户项目、设计素材、私有仓库和生产部署时，需要明确授权并人工复核。

CTA：修 CSS bug 前，可以先用 项目报价助手 拆分诊断和修复，再用 Proposal 生成器 写客户确认问题。