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协作更顺畅，也方便他人理解你的代码结构。
以上就是HTML中ID和Class命名规范与格式化_HTML中IDClass命名规范格式化的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1582799.html
微信扫一扫 
支付宝扫一扫 
