技能介绍

解决什么问题

移动端 H5 项目往往不是单文件脚本，而是包含页面、组件、接口、构建和上线的完整工程。常见风险包括：CSS 单位混用导致不同机型错位；组件职责不清造成重复代码；异步请求缺少统一错误处理；Git 提交信息难以回溯；部署前没有固定检查性能、包体积和安全项。Frontend H5 Code Standards 的目标是把这些约定变成团队可以直接执行的规范，而不是只停留在口头要求。

核心能力与使用方式

HTML 与移动端适配：要求使用语义化标签、图片 alt、touch-action、-webkit-tap-highlight-color，并处理禁用缩放和电话/邮箱自动识别，减少点击、表单和兼容问题。
CSS 与性能：推荐 BEM 命名、rem / vw 响应式单位、限制嵌套层级、避免 * 选择器，并使用 CSS 变量管理主题色和关键样式加载。
JavaScript 与 Vue 3：约束 const / let、模板字符串、try-catch、防抖节流、事件清理，以及基础组件、业务组件、页面组件的边界和 props / events / slots 数据流。
工程化与上线检查：覆盖 Commit 类型、README、组件文档、API 文档、部署检查清单，以及 FCP < 1.5s、LCP < 2.5s、FID < 100ms、CLS < 0.1、包体积 < 500KB 等量化指标。

适用边界与注意点

这套规范更适合 iOS Safari 12+ 与 Android Chrome 70+ 的活动页、中后台页和业务 H5 项目。若团队已经使用 ESLint、Prettier、Stylelint 或 Vue 文档工具，可以将其作为移动端和 Vue 3 约定的补充；React、桌面端或纯后端项目应只映射相关原则，不能直接照搬 Vue 3 与 H5 场景规则。