命名必须语义化且规范：id需唯一以防js失效和无障碍问题，class应使用kebab-case和功能语义命名（如error-message），避免表现型命名和非法字符，以保障可维护性、seo及跨环节协作。
随便起名直接破坏可维护性，不是“没关系”，而是“很快出问题”。
id重复会导致document.getElementById()失效
浏览器不报错，但 document.getElementById("header") 只返回第一个匹配元素，后续同名 id 完全被忽略。常见于复制粘贴模块、CMS动态插入、Vue/React组件复用后未重置 id。
- 表单中多个
<label for="email"></label>指向同一个id，点击 label 只聚焦第一个 input - AJAX 加载内容时未清理旧
id，新旧 DOM 共存引发 JS 逻辑错乱 - SEO 工具或无障碍阅读器把重复
id当作结构错误，降权或跳过关键区块
class命名不语义会拖垮样式迭代效率
像 class="red-box" 或 class="big-text" 这类表现型命名，一旦设计改版——红色变蓝色、字号缩小——你得同时改 HTML、CSS、JS 查询（如 document.querySelector(".red-box")），三处散落，极易漏改。
- 推荐用内容/功能命名：
class="error-message"、class="product-card"、class="nav-primary" - 多个 class 组合表达状态：
class="button button--disabled button--primary"，比class="btn-red-disabled"更易扩展 - BEM 规范下，
class="card__title"明确表示它是 card 的子元素，而非独立模块
kebab-case 是当前最稳妥的命名格式
所有主流框架（React/Vue/Svelte）、构建工具（Vite/Webpack）和 CSS-in-JS 方案都默认支持小写+短横线，而下划线 _ 在某些 CSS 预处理器里有特殊含义，驼峰式 camelCase 则与 HTML 属性原生不兼容（HTML 属性名不区分大小写）。
- ✅ 正确：
id="main-navigation"、class="user-profile-section" - ❌ 避免：
id="MainNav"、class="userProfile"、class="user_profile" - 数字开头、空格、中文、特殊符号（如
.、#）在 HTML 中均非法，解析会截断或报错
真正麻烦的从来不是“起个名字”，而是名字一旦写进 HTML 和 CSS，就会在 JS 查询、自动化测试、SEO 抓取、无障碍审查里反复出现——语义化不是为了好看，是让每个环节都能准确理解“这是什么”，而不是“它看起来像什么”。
