ID与Class命名应遵循语义化、小写英文、短横线分隔原则，推荐使用kebab-case格式，避免数字开头、特殊字符及标签名重复；采用BEM模式（Block__Element--Modifier）提升结构清晰度，防止样式冲突；避免下划线开头、过长名称和含义混杂的命名，保持代码可读性与维护性。
在HTML开发中，ID和Class的命名不仅影响代码的可读性，还关系到后续维护与团队协作效率。良好的命名规范能让结构更清晰，样式与脚本更容易定位元素。
命名基本原则
语义化优先：名称应准确描述元素的功能或内容，避免使用抽象或无意义的词如“div1”、“box”。
例如，用 header-nav 比 nav1 更具可读性。
- 使用英文小写字母
- 避免中文或特殊字符
- 不以数字开头
- 不要使用HTML标签名作为唯一类名（如class="div"）
ID与Class的命名格式
ID在一个页面中应唯一，Class可重复使用。两者都推荐使用短横线分隔命名法（kebab-case）。
立即学习“前端免费学习笔记（深入）”；
- ID示例：user-profile、main-header
- Class示例：btn-primary、sidebar-menu
虽然JavaScript中常用驼峰命名（camelCase），但在HTML属性中建议统一使用短横线格式，保持一致性。
常见BEM命名模式（适用于Class）
BEM（Block__Element--Modifier）是一种流行的CSS命名方法，提升结构清晰度。
- Block：独立功能模块，如 card
- Element：属于块的子元素，如 card__title
- Modifier：状态或变体，如 card__button--disabled
这种命名方式能清晰表达组件层级与状态，减少样式冲突。
避免常见错误
命名时需避开一些易出错的做法：
- 不要在ID或Class中使用下划线开头（除非项目有特定约定）
- 避免过长名称，如 very-long-navigation-item-for-homepage-only
- 不用内联样式覆盖类名逻辑
- 避免多个含义混杂，如 red-bold-text（应使用语义名如 error-message）
基本上就这些。坚持清晰、一致的命名习惯，能让HTML和CSS协作更顺畅，也方便他人理解你的代码结构。
