HTML嵌套过深时需严格缩进（2空格）、合理注释（仅关键处）、语义化class命名（如BEM）、慎用自动格式化并校验输出。
HTML 嵌套层级深时，缩进必须严格对齐
浏览器不关心缩进，但人会看晕。嵌套超过 3 层后， 实操建议： 注释不是越多越好。HTML 注释（ 该加的地方： 立即学习“前端免费学习笔记（深入）”； 不该加的地方： ... 注释可能被删、被忽略、不同步更新；而 class 名只要没改，就始终和结构绑定。合理命名能大幅降低对注释的依赖。 实操要点： Prettier、HTMLBeautify 等能一键缩进，但它们不了解你的业务逻辑。比如 使用前注意： 最常被忽略的是：多人协作时，有人关了格式化、有人开了，导致同一文件提交前后缩进混乱。建议在项目根目录加 再套 ，如果缩进不统一，连闭合标签都容易配错。
"editor.insertSpaces": true 和 "editor.tabSize": 2
> 类自闭合标签（如 ）也按层级缩进，和周围标签视觉对齐class 或 data-），换行并缩进到与属性名起始列对齐，而非随意断行哪些地方该加注释，哪些不该
）在生产环境会随 HTML 一起下发，无压缩时增大体积；更重要的是，错位或过期的注释比没注释更误导人。
，但别写成 （中英文混用难搜索）
（闭合标签本身已说明意图） 就是段落）用 CSS class 名辅助阅读，比注释更可靠
wrap、box、content 这类无上下文的 class，改用 header-logo、product-card-list 等带业务语义的名称search-form__input 表示它是 search-form 的直属子元素，而非 search-form-input（后者易误判为独立组件）debug-border）务必在上线前 grep 清理，否则污染结构可读性自动格式化工具不是万能解，要校验输出
内部的
嵌套，有些格式化器会把所有单元格挤到一行，反而破坏可读性。
htmlWhitespaceSensitivity: "strict"（Prettier），避免误删有意义的空白文本节点 或 的 HTML，先分离再格式化，否则 JS/ CSS 缩进可能被错误处理 正确包裹、SVG 内嵌 是否被折行打断、data-* 属性值是否因换行被截断（尤其含 JSON 字符串时）.prettierrc 并纳入 Git，比靠自觉靠谱得多。
