HTML文件名必须全小写、禁用空格和中文，因Linux/Unix服务器大小写敏感且未编码的空格或中文会导致URL解析失败而404；首页统一用index.html，多词命名采用kebab-case（如product-list.html），class/id需语义化（如article-meta而非red-text），data-属性也须kebab-case以保障框架兼容。
HTML文件名必须全小写且禁用空格和中文
服务器（尤其是 Linux/Unix 类系统）对文件名大小写敏感，aboutUs.html 和 aboutus.html 是两个不同文件；含空格或中文的文件名在 URL 中会被编码为 %20 或乱码，导致链接 404 或资源加载失败。
- ✅ 正确：
contact.html、product-list.html、user-profile.html - ❌ 错误：
AboutUs.html、关于我们.html、news list.html、banner_1.jpg（数字后缀易失控，应语义化） - 首页面统一用
index.html，不要用Index.html或default.htm混用
class 和 id 必须语义化，禁用样式/位置/标签名嵌入
写 class="red-text" 或 id="left-sidebar" 看似直观，但颜色一改、布局一动，类名就失效；更糟的是，JS 脚本或 CSS 规则会因命名歧义而误匹配或难以调试。
- ✅ 用功能或内容角色命名：
class="article-meta"、class="search-input"、id="main-content" - ❌ 避免：
class="float-left"、class="big-title"、class="div-header"（锁死标签类型） -
data-属性也需 kebab-case：data-user-id="123"，否则 Alpine.js / Vue 等框架无法自动绑定
多词命名统一用 kebab-case，不混用下划线或驼峰
kebab-case（短横线分隔）是 HTML/CSS 生态事实标准：URL 友好、CSS 选择器合法、浏览器解析稳定。下划线在部分旧版 IE 中有兼容问题；驼峰在 HTML 属性中无法被 JS 直接读取（el.getAttribute('userEmail') 返回 null，除非用 el.dataset.useremail）。
- ✅ 所有场景保持一致：
header-nav、user-profile-card、js-toggle-menu - ❌ 不要：
header_nav、userProfileCard、JS-ToggleMenu - 图片、JS 文件、PHP 脚本同理：
logo-primary.svg、utils-api.js、auth-login.php
BEM 命名不是套公式，关键看组件边界是否真实存在
card__title--large 看起来规范，但如果这个 title 同时出现在 sidebar 和 modal 里，它就不是 card 的子 element，而是独立模块——此时该叫 heading-section 或 title-block。
- ✅
btn__icon成立的前提：图标只服务于该按钮，且不可单独复用 - ❌
card__content__title是典型错误：DOM 层级 ≠ 组件层级；应拆为card__content和card__title（同级） - modifier（
--）只表达状态或外观变体：btn--disabled✅，btn--full-width❌（这是容器或布局职责）
实际项目中最容易被忽略的，是 data- 属性和 form name 的命名一致性——它们直接影响后端接收逻辑，且一旦上线就极难批量修改。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
