html文件名必须全小写+kebab-case，否则部署到linux/nginx/apache等大小写敏感服务器时会404；首页强制为index.html，禁用大写、下划线、空格、中文及特殊符号。
HTML文件名必须全小写+kebab-case，否则部署就404
本地双击能打开，一上传服务器就 404 Not Found？大概率是文件名用了大写、下划线或空格。Linux/Nginx/Apache 默认区分大小写，AboutUs.html 和 about-us.html 是两个不同文件；user_profile.html 在 GitHub Pages 或某些 CDN 上会被拒绝解析。
- 正确写法：
index.html（首页强制）、contact-us.html、blog-post-2024.html - 禁止写法：
AboutUs.html、user_profile.html、contact us.html、2024-report.html - Windows 用户务必开启「显示文件扩展名」，避免保存成
index.html.txt；VS Code 保存时选「All Files」，Mac 可用file index.html验证类型
class 和 id 必须语义化 + kebab-case，别写 red-text 或 left-nav
写 class="red-text" 看似省事，换主题后就得全局搜替换；写 id="left-nav" 遇到双侧栏就 JS 失效。命名不是描述“它长什么样”，而是“它是什么”。
- ✅ 推荐：
class="error-message"、class="search-submit"、id="main-content" - ❌ 避免：
class="big-blue"、class="clear-fix"（除非是带前缀的工具类，如u-clear）、id="btn1" - id 必须全局唯一，且仅用于锚点跳转或 JS 精确操作；含点号（如
user.email）需在 JS 中转义：getElementById("user\.email")
BEM 不是必须套符号，但 block__element--modifier 结构得有意识
BEM 的价值不在双下划线和双短横本身，而在强制你思考组件层级与变体关系。没用 BEM 符号但结构清晰，比乱用符号强得多。
- 合理拆解：
class="card"→class="card__title"→class="card__title--highlighted" - 不必硬套：简单页面用
header、nav-main、article-list也完全合规 - 重点是 block 独立可复用，element 属于且只属于该 block，modifier 表状态而非样式（
btn--disabled✅，btn--red❌）
data-* 属性必须加项目前缀，否则第三方库会打架
data-toggle 这种通用名，Alpine.js、HTMX、自定义脚本都可能监听——不加前缀等于裸奔。浏览器不校验，但冲突发生时 debug 成本极高。
- 正确写法：
data-myapp-modal-target="confirm"、data-shop-cart-item-id="123" - 错误写法：
data-toggle="modal"、data-user_id="456"（下划线+无前缀） - 值尽量用字符串或数字；敏感信息（token、邮箱）绝不能塞进
data-，源码里全可见
真实项目里最常被忽略的不是规则本身，而是「一致性」——同一个团队里有人用 user-profile，有人写 userProfile，有人塞 data-id 而不加前缀，时间一长，CSS 和 JS 就开始互相猜谜。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
