<p>HTML 中 class 和 id 命名须语义优先、kebab-case 统一、全局唯一：class 应表功能如 error-message，禁用 red-text 等样式名；id 必须唯一且用于锚点或 JS 精确操作；工具类加 u- 前缀；BEM 重在结构意识而非符号；data-* 需加项目前缀，name/id 避免重复。</p>
HTML 中 class 和 id 的命名不是“起个能用的名字”就行，一旦混用样式名、标签名、拼音或大小写混乱，CSS 选择器会失效、JS 找不到元素、团队协作时互相猜半天——核心就一条：语义优先，kebab-case 统一，全局唯一。
class 名为什么不能叫 red-text 或 float-left
这类名字描述的是「当前长什么样」，而不是「它是什么」。设计改版后，red-text 可能变成橙色，float-left 可能改成 flex 布局，但 class 名没变，CSS 文件里就得全局搜替换，还容易漏掉嵌套结构里的同名 class。
- ✅ 推荐：
error-message、sidebar-nav、search-submit——表达功能或内容角色 - ❌ 避免：
red-text、big-title、clear-fix（除非是明确约定的工具类，如u-clear） - 工具类必须加前缀隔离，比如
u-hidden、u-text-center，且只用于无语义的纯行为控制
id 必须唯一，且不能只当 class 用
id 是锚点跳转和 JS 精确操作的依据，浏览器、辅助技术、React/Vue 的 hydration 都依赖它的唯一性。用错一个，轻则 JS 只取到第一个匹配元素，重则 SSR 渲染错乱。
- ✅ 合理场景：
id="main-content"（供#main-content跳转）、id="form-contact"（关联<label for="form-contact">）、id="modal-confirmation"（JS 控制单个弹窗） - ❌ 错误用法：
id="btn-primary"（多个按钮都这么写？）、id="sidebar"（页面出现两个侧边栏就崩了） - 若
id含特殊字符（如点、冒号），JS 中必须转义：getElementById("user\.email")，否则会被当 CSS 选择器解析
kebab-case 是唯一安全的分隔方式
连字符（-）是 HTML/CSS/JS 全链路兼容性最好的分隔符。下划线在旧版 IE 有兼容问题；驼峰在 JS 操作时易与变量混淆；中文或拼音会导致 Git diff 乱码、编辑器高亮异常、Webpack 编码警告。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- ✅ 统一用：
user-profile、nav-main、card__header--highlighted（BEM 中双下划线和双短横是语法，但主干仍是 kebab-case） - ❌ 禁止混用：
userProfile、user_profile、用户列表、yonghuList - 文件名也一样：
user-profile.html✅，user_profile.html❌（GitHub Pages、IIS 等可能 404）
BEM 不是银弹，但结构意识不能丢
BEM 的价值不在符号本身，而在逼你思考「块-元素-修饰符」三层关系。不用 BEM 也可以，但得避免 button、big-button、btn-primary-active-hover 这种失控式命名。
- 简单组件用两段式足够：
card（块）、card-title（元素）、card--loading（修饰符） - 修饰符要语义化：
card--loading✅，card--gray❌（换主题色就失效） - 避免过度嵌套：
card__title__link是错的，应为card__title-link（link 是 title 的一部分，不是独立层级）
最容易被忽略的其实是 data-* 属性和表单 name/id 的联动：data 属性必须加项目前缀（如 data-myapp-modal-target），否则第三方库可能冲突；而 name 和 id 值一旦重复，多选框组或 label 点击聚焦就会失效——这种问题往往上线后才暴露，且很难复现。
