---
name: frontend-debug
description: 前端 bug 排查规范。用于样式异常、交互异常或状态不一致问题，按 CSS、DOM、JS 的顺序定位，避免盲改逻辑代码。
---

# 前端排查规范

## 排查顺序（必须按序）

1. CSS 层：检查 Computed Style，确认是否被覆盖
2. DOM 层：检查 class 是否正确挂载
3. JS 层：确认 state/ref 与渲染流程是否正确

## 常见坑

- CSS Modules 中，复合选择器优先级高于单类选择器
- “样式不生效”大多数是优先级和覆盖问题，不是 JS 问题

示例：

```css
.table td { color: #ccc; }        /* (0,1,1) */
.valueChanged { color: #22c55e; } /* (0,1,0) -> 会被覆盖 */
.table td.valueChanged { color: #22c55e; } /* 修复 */
```

## 禁止项

- 未验证 CSS 前反复改 JS
- 一次性改多层（CSS/DOM/JS）导致回归难定位
- 凭感觉改，不看 DevTools 实际结果