clawic/skills

网站开发规则

性能

• 图片是导致网站缓慢的头号原因——使用 WebP/AVIF 格式，对首屏以下的图片进行懒加载，并设置明确的宽度/高度以防止布局偏移
• 渲染阻塞 CSS 会延迟首次绘制——将关键 CSS 内联到 <head> 中，其余部分延迟加载
• 第三方脚本（分析、聊天小部件）通常会增加 500 毫秒以上的延迟——使用 async 或 defer 加载，并定期审计
• 字体可能导致不可见文本闪烁 (FOIT)——使用 font-display: swap 并预加载关键字体
• 在无痕模式下使用 Lighthouse 进行测量——扩展程序会影响结果

移动优先

• 从移动端样式开始编写 CSS，通过 min-width 媒体查询增加复杂性——向外扩展比向内缩减更容易
• 触摸目标至少需要 44x44 像素——手指不精确，小按钮会让用户感到沮丧
• 在真实设备上测试，而不仅仅是浏览器 DevTools——节流模拟无法捕捉真实的卡顿
• 水平滚动是一个严重错误——测试每个页面，确保最小宽度 320 像素时无水平滚动
• viewport meta 标签是必需的：<meta name="viewport" content="width=device-width, initial-scale=1">

无障碍性

• 每个 <img> 都需要 alt 文本——装饰性图像使用空 alt=""，有意义的图像使用描述性文本
• 正文文本的颜色对比度至少为 4.5:1——使用 WebAIM 对比度检查器
• 表单输入必须有相关联的 <label> 元素——仅占位符是不可访问的
• 键盘导航必须可用——使用 Tab 键测试每个交互元素
• 屏幕阅读器会朗读标题层级——按逻辑顺序使用 H1-H6，切勿跳级

HTML 结构

• 每页只有一个 <h1>——它是页面标题，而不是样式工具
• 使用语义元素：<nav>、<main>、<article>、<aside>、<footer>——它们向浏览器和辅助技术传达结构
• 使用 <button> 表示操作，使用 <a> 表示导航——不要使用带有点击处理器的 div
• 外部链接应包含 rel="noopener"——防止 target="_blank" 带来的安全漏洞
• 验证 HTML——有错误的标记会导致跨浏览器的不可预测渲染

CSS 模式

• 避免使用 !important——它会破坏层叠并使调试变得困难。请修复选择器优先级
• 文本使用相对单位（rem、em、%）而非固定单位 px——尊重用户的字体大小偏好
• CSS 自定义属性（变量）可减少重复——定义一次颜色和间距，然后随处使用
• Flexbox 用于一维布局，Grid 用于二维布局——不要强迫一个做另一个的工作
• 在不加载 CSS 的情况下测试——内容在纯 HTML 中应仍然可读

常见错误

• 缺少 favicon 会导致服务器日志中出现大量 404 错误——始终包含一个，即使是简单的 PNG 图标
• 未设置 <html lang="en"> 会破坏屏幕阅读器的发音
• 硬编码的 http:// 链接在 HTTPS 网站上会失效——使用协议相对路径 // 或始终使用 https://
• 假设 JavaScript 可用——核心内容应在没有 JS 的情况下也能工作（渐进增强）
• 忘记打印样式——为用户可能打印的页面（收据、文章）添加 @media print

发布前

• 测试所有表单是否真正提交——损坏的联系表单会悄无声息地丢失潜在客户
• 检查 404 页面是否存在且有用——默认的服务器 404 页面看起来不专业
• 使用 Open Graph 标签验证社交分享预览——在 Facebook/Twitter 调试器中测试
• 将站点地图提交到 Google Search Console——加快索引速度
• 设置正常运行时间监控——在用户通知您之前了解网站何时宕机