HTML模板文件名必须用kebab-case（中划线分隔），如user-profile.html；用snake_case或PascalCase易被构建工具忽略或触发404，因路径解析逻辑与URL、CSS类名保持一致，且避免大小写和转义错误。
HTML模板文件名该用 kebab-case 还是 snake_case？
绝大多数现代前端工程（Vue、React SSR、Nuxt、Next）默认只认 kebab-case（中划线分隔），比如 user-profile.html、admin-dashboard.html。用 user_profile.html 或 UserProfile.html 很可能被 loader 忽略或触发 404——尤其在 Webpack 的 html-webpack-plugin 或 Vite 的 glob import 场景下。
原因不是语法限制，而是约定俗成的路径解析逻辑：构建工具常把文件名映射为路由路径或组件名，而 URL 和 CSS class 均倾向 kebab-case，保持一致能减少大小写转换和转义错误。
- 避免使用大写字母：Windows 下不敏感但 Linux/CI 环境会出错，
UserList.html→userlist.html可能加载失败 - 禁止空格和中文：直接导致构建报错
Module not found: Error: Can't resolve './pages/user list.html' - 下划线
_在某些 CMS（如 Jekyll）里有特殊含义（表示忽略目录），慎用
template 标签里 class 和 id 怎么起名才不冲突？
模板内命名不是“好不好看”的问题，而是“会不会被 JS 拿错”“CSS 覆盖是否可控”的实操问题。常见翻车点：多个模板共用 id="header"，结果 document.getElementById('header') 总返回第一个；或者 class="btn" 被全局样式暴力覆盖。
推荐做法是加作用域前缀，且与文件名强关联。例如 product-list.html 里的按钮写成 class="product-list__add-btn"，而不是 class="btn btn--primary"。
- 用 BEM 规范（
block__element--modifier）比纯语义化 class 更可靠，尤其在多团队协作时 - 避免纯功能型 class 名，如
hidden、flex——这类名极易在不同模板中重复定义，造成样式打架 - JS 绑定事件优先用
data-属性，比如data-action="open-modal"，比依赖 class 名更稳定
include / partial 模板怎么传参才不会漏数据？
原生 HTML 不支持参数传递，所以所有“include”行为都依赖构建工具或后端模板引擎（如 EJS、Nunjucks、Django Template）。关键陷阱在于：变量作用域不继承、异步加载时机错乱、JSON 数据未转义。
以 Nunjucks 为例：{% include "components/button.html" with context %} 中的 with context 决定子模板能否访问父级变量；漏掉它，{{ label }} 就是 undefined。
- 静态 include（如 Webpack 的
html-loader?attrs=include:data-html）完全不支持传参，只能靠预编译注入，适合无逻辑的纯结构复用 - 动态渲染场景（如服务端吐 HTML）务必对传入字符串做 HTML 转义，否则
{{ user.name }}里含<script></script>会 XSS - 避免在 include 里写复杂逻辑，比如
{% if items|length > 10 %}—— 该判断应前置到父模板，子模板只负责渲染
为什么改了模板但页面没更新？缓存和构建链路最容易卡在哪
不是代码没保存，也不是浏览器没刷新，而是构建产物没重生成。典型链路：修改 header.html → index.html 用 include 引入它 → 但构建工具没监听 header.html 变更，于是 index.html 输出还是旧内容。
Webpack 用户要检查 html-webpack-plugin 的 template 配置是否指向主 HTML 文件，而非 include 的碎片；Vite 用户需确认 import.meta.glob 是否包含对应路径，且 watch 开关已启用。
- 开发时临时加
console.log(Date.now())到模板里，是最快速验证“是否真加载了新文件”的办法 - 如果用了 EJS/Nunjucks，确保
cache: false（开发环境），否则模板编译结果会被内存缓存住 - CDN 或 Nginx 缓存静态 HTML 时，别只刷浏览器——得清服务器端缓存或加版本号，比如
index.html?v=20240521
实际项目里，最耗时间的往往不是写模板，而是排查“为什么这里没变”。命名规范只是起点，真正卡住人的，永远是构建链路里那个没声明的依赖关系、那个没关掉的模板缓存、或者那个被 Webpack 当作静态资源却忘了 watch 的 partial 文件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
