html文件名须全小写+kebab-case，如contact-us.html；class/id需语义化命名，如search-input；data-*属性必须加项目前缀，如data-shop-cart-item-id；id须全局唯一，避免js获取失败。
HTML文件名必须全小写+kebab-case，否则部署就404
Linux/Nginx/Apache/GitHub Pages 全部区分大小写，user_profile.html 或 AboutUs.html 在服务器上大概率返回 404，但本地双击却能打开——这是最典型的路径错觉陷阱。
- 正确写法：
index.html、contact-us.html、product-list.html - 禁止写法：
user_profile.html（下划线）、UserProfile.html（驼峰）、contact us.html（空格） - 数字可出现在中间或末尾：
report-2024.html✅，2024-report.html❌（不能开头） - Windows 用户务必开启「显示文件扩展名」，防止保存成
index.html.txt
class 和 id 命名不是为了好看，而是为了不被 JS 找不见
id 不是“带样式的 class”，它是锚点跳转和 document.getElementById() 的唯一依据；class 也不是样式快照，它得告诉别人“这个东西是干啥的”。
- ✅ 语义优先：
class="search-input"、id="contact-form"、class="article-meta" - ❌ 样式绑架：
class="red-btn"（换主题就失效）、id="div1"（无法定位）、class="float-left"（布局逻辑不该写死在 HTML） - JS 操作时注意：
getElementById("user.email")必须写成getElementById("user\.email")，否则会被当 CSS 选择器解析 - SSR/React hydration 场景下，动态生成的
id="item-{{id}}"必须确保值全局唯一，否则 DOM 树错乱
data-* 属性不加前缀，第三方库一上就冲突
浏览器不校验 data- 属性，但 Alpine.js、HTMX、自定义脚本都可能监听同名字段。没前缀就像在公共频道喊“开门”，谁都能响应。
- 必须加项目/模块前缀：
data-shop-cart-item-id、data-myapp-modal-target - 禁止裸名：
data-toggle、data-product-id（极易被 Bootstrap 或其他库劫持） - 命名统一用 kebab-case：
data-abc-user-id✅，data-abc_user_id❌ - PHP/Node 后端接收时，
name="user-email"比name="userEmail"更稳定，避免服务器配置差异导致$_POST键名丢失
BEM 不是套符号，是画清组件边界
card__title--large 看似标准，但如果这个标题同时出现在 footer 和 modal 里，它就不是 card 的子元素，而是独立内容块——BEM 失效的根本原因是把 DOM 结构当成了组件结构。
- 真实父子才用
__：btn__icon（图标只服务该按钮），nav__link（链接只属于导航） - 禁止嵌套 element：
card__content__title❌，应拆为card__content+card__title（同级）或单独heading-section -
--只修饰外观或状态：btn--disabled✅，btn--full-width❌（宽度由容器决定，不是按钮自身状态） - 工具类加统一前缀：
u-hidden、u-text-center，避免和业务 class 混淆
实际协作中最容易被忽略的，是 id 的唯一性约束和 data- 属性的前缀强制性——它们不出现在视觉层，但一旦漏掉，调试成本远高于写错一个 class 名。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
