类名是为人和JS设计的，语义化依赖准确命名而非标签堆砌；class中空格分隔才表示多个独立类，下划线或驼峰写法仅为单个类名；禁用样式关键词命名，优先用BEM或语义化modifier；id须全局唯一且仅用于锚点、JS绑定或ARIA关联。
直接说结论：类名不是写给CSS看的，是写给人和JS看的；语义化布局不靠多套标签堆砌，而靠class命名是否准确反映内容意图。
class 属性里写多个名字，到底算几个类？
很多人误以为 class="user-profile-card" 是“用户”“档案”“卡片”三个类，其实它就是一个完整类名——浏览器只认这个字符串整体。真正能拆开起作用的是空格分隔的写法：class="user profile card"，这时元素才同时拥有 user、profile、card 三个独立类，可分别被 .user、.profile 等选择器匹配。
常见错误现象：
- 写成
class="user_profile"或class="userProfile"，结果 CSS 里用.user_profile能生效，但.userProfile在部分构建工具中可能被自动转义或忽略 - 把
class="btn primary large"当作“按钮+主要+大号”三层含义，却没在 CSS 中定义.primary和.large的通用规则，导致复用困难
实操建议：
- 多个类名之间必须用空格，不能用下划线、连字符或逗号
- 连字符（
-）只用于单个类名内部，如user-profile，这是 kebab-case 标准写法，不是分隔符 - 如果想组合行为，优先用 BEM 风格：
button--primary表示变体，button__label表示子元素，避免歧义
为什么 class="red-btn" 这种命名上线后就踩坑？
因为颜色不是功能，而是表现。今天按钮是红色，明天主题换成深蓝，red-btn 这个类还在样式表里，但实际背景色早已改成 #0d47a1 ——此时你面临两个选择：改 HTML 所有地方，或让类名彻底失语。
使用场景：
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 团队协作时，新成员看到
class="float-left"，第一反应是“这个要左浮动”，结果发现它只是用来触发 BFC，跟浮动毫无关系 - 换肤系统需要动态切换主题，所有样式类都绑定到语义名（如
.cta-button），才能通过一套 CSS 变量控制全部
实操建议：
- 命名锚点始终是“它是什么”或“它干什么”，比如
.search-submit、.error-summary、.product-list-item - 禁用任何含样式关键词的类名：
bold、center、inline-block、mb-4（除非你明确采用 Utility-First 架构并全项目统一） - 如果真需要表达状态，用 modifier：不是
class="success-text"，而是class="message message--success"
id 和 class 混用时最容易忽略的兼容性问题
id 不只是“加个锚点”那么简单。JS 里用 document.getElementById() 查找最快，但一旦页面里出现重复 id，行为不可预测；而 class 天然支持多实例，但用 querySelector('.header') 查到的是第一个，不是全部。
性能与兼容性影响：
-
id在 CSS 中特异性极高（100），一个#nav能轻易覆盖十个.nav-link，容易引发意外覆盖 - 某些 SSR 框架（如 Next.js）在 hydrate 阶段对重复
id报 warning，但不报错，线上可能静默失效 - ARIA 属性如
aria-labelledby必须指向有效id，拼错或缺失会导致读屏器跳过关键信息
实操建议：
-
id只用于三类场景：锚点跳转（#faq）、JS 显式绑定（useRef或getElementById）、ARIA 关联（aria-controls="modal-1"） - 同一页面内，
id值必须全局唯一，且首字符只能是字母或下划线，不能以数字开头（id="1st-item"合法但不推荐） - 不要为了“方便 JS 操作”而给每个列表项加
id，改用data-id="123"+querySelectorAll('[data-id]')
最常被忽略的一点：语义化不是靠堆砌 article、section 标签实现的，而是当别人只看你的 class 名字，就能猜出这块区域在业务中承担什么角色——比如看到 class="checkout-step-shipping"，就知道这是结算流程第三步，且 shipping 是子模块，不是随便一个 div。这要求命名时少想“怎么写 CSS”，多想“别人下次维护时会怎么读”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
