generic-static-code-reviewer

静态网站代码审查员

根据生产质量标准审查 HTML/CSS/JS 代码。

扩展：通用代码审查员 — 阅读基础技能，了解完整的代码审查方法、P0/P1/P2 优先级体系和判断准则。

提交前检查清单

# Local testing (cross-platform options)
python -m http.server 8000   # Windows
python3 -m http.server 8000  # macOS/Linux
npx serve .                  # Node.js (recommended - all platforms)

# Visual inspection
# - Test in Chrome, Firefox, Safari
# - Test at 375px, 768px, 1024px
# - Lighthouse audit

• 已通过视觉检查
• 在所有主流浏览器中均可运行
• 在所有断点下均具有响应式表现
• Lighthouse 性能评分达到 95+

静态网站专项检查

无需构建工具验证

文件应可直接提供：

• 纯 .html 文件（无模板）
• 纯 .css 文件（无 Sass/Less）
• 纯 .js 文件（无打包/转译）
• 生产环境无需 node_modules

页面体积目标（P1）

目标	最大体积
HTML	< 5KB
CSS	< 10KB
JavaScript	< 5KB
总计（不含图片）	< 50KB
图片（每张）	< 500KB

HTML 质量

<header>
  <nav><a href="#">Link</a></nav>
</header>
<main>
  <article>
    <h1>Title</h1>
    <p>Content</p>
  </article>
</main>
<footer></footer>


<img src="image.jpg" alt="Description" />
<br />
<input type="text" />

CSS 质量

/* CSS custom properties for theming */
:root {
  --bg-primary: #000000;
  --text-primary: #ffffff;
  --accent: #00ff00;
}

/* Mobile-first responsive */
.container {
  padding: 1rem;
}

@media (min-width: 768px) {
  .container {
    padding: 2rem;
  }
}

/* Avoid !important - signals specificity problems */

JavaScript 质量

// ES6+ syntax (modern browsers support it)
const items = document.querySelectorAll(".item");
const handler = (e) => console.log(e.target);

// Event delegation (preferred)
document.body.addEventListener("click", (e) => {
  if (e.target.matches(".button")) {
    handleClick(e.target);
  }
});

// No jQuery dependencies
// No framework overhead

Lighthouse 要求（P1）

指标	目标
性能	95+
无障碍	90+
最佳实践	100
SEO	100
首次内容绘制	< 1s

另请参阅

• 通用代码审查员 — 基础方法
• 代码审查标准 — 完整要求
• 设计模式 — UI 一致性