复现已有算法

2026-07-14 15:43:18 +08:00
parent abebd2a683
commit 50b8111fd9
860 changed files with 182250 additions and 18 deletions
@@ -0,0 +1,31 @@
+---
+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 实际结果