结论：HTML规范必须通过自动化工具落地执行。Prettier统一格式、Stylelint约束类名、模板预置注释、空行划分逻辑、注释标准化并强制英文，配合husky预提交校验，才能真正提升协作效率。
直接说结论：不落地的HTML规范就是纸上谈兵，真正提升协作效率的关键，在于把规范变成编辑器里自动执行的动作，而不是贴在Wiki上的PDF。
为什么prettier比手写规范文档更管用
团队成员记不住“属性按class→id→data-*顺序写”，但能接受保存时自动重排。Prettier对HTML的格式化不是锦上添花，而是解决冲突的第一道防线：
- 它强制统一缩进（推荐
2空格）、引号（"）、自闭合标签（<img>不加/） - 支持
htmlWhitespaceSensitivity: "css"，避免意外折行破坏语义 - 配合VS Code的
editor.formatOnSave，新人第一次保存就产出合规代码 - 注意：Prettier不处理类名命名或语义化标签选择——那是
eslint-plugin-html或人工CR的事
class命名不统一？先堵住源头再谈风格
争论“btn-primary还是primary-button”之前，得确保没人写bigRedBtn。BEM或kebab-case不是目的，而是降低理解成本的手段：
- 用
stylelint配置selector-class-pattern规则，提交时直接报错 - 在
.stylelintrc里写死"^[a-z][a-zA-Z0-9-]*$"，拒绝下划线和大写字母 - 模板文件（如
_header.html）里预置带注释的类名示例，比口头约定更可靠 - 别指望开发者自觉写
/* 导航栏 */，而要让/* 导航栏 */成为文件模板的一部分
空行不是“看着舒服”，是逻辑分界线
连续3个<div>堆在一起，没人看得出哪段属于表单、哪段属于侧边栏。空行本质是视觉锚点：
立即学习“前端免费学习笔记（深入）”；
- 模块之间用
1个空行（如<header>和<main>之间） - 大区块之间用
2个空行（如页面级<section>之间） - Prettier默认不插空行，需手动配
htmlWhitespaceSensitivity: "ignore"+ 自定义插件，或改用prettyhtml - 响应式断点内样式块前加空行，调试时一眼定位
@media (max-width: 768px)影响范围
注释写在哪，比写什么更重要
没人在意你写了“此处为轮播图”，而在意你没写清楚“data-interval="5000"由后端API动态注入，勿硬编码”：
- 头部注释必须包含
author和@modified，否则三个月后没人知道谁动过footer.html - 关键
data-*属性旁必须跟注释，比如<div data-user-id="123"><!-- 后端返回，不可为空 --> - 禁用
<!-- TODO: 重构 -->这种无责任人、无截止日的注释；换成<!-- @todo 张三 2026-05-20: 替换为useUser hook --> - 所有注释必须用英文（
<!-- mobile menu toggle -->），避免中文字符在某些构建工具里引发编码错误
最常被忽略的点：规范的生命力不在文档页数，而在package.json里那行"format": "prettier --write ."是否真被执行，以及husky的pre-commit钩子有没有拦住未格式化的代码。没走通这条自动化链路，再多准则也只是会议室里的幻灯片。
