语义化标签不能替代class命名；浏览器仅识别标签语义，css精准样式控制仍需class区分变体，如两个需用.post-item和.promo-card等语义类名，而非依赖标签或位置选择器。
语义化标签本身不替代 class 命名
很多人以为用了 <article></article> 就不用写 class，其实不是。浏览器只认标签的语义含义，但 CSS 选择器要精准控制样式时，仍需靠 class 区分同类结构下的不同变体。比如两个 <article></article>，一个用于博客正文，一个用于推荐卡片——仅靠标签无法区分视觉差异。
常见错误现象：
• 写成 <article class="blog-post"></article> 却在 CSS 里用 article.blog-post 强耦合，导致后续加个广告位 <article></article> 就得改选择器
• 完全省略 class，只靠 article:first-child 这类位置选择器，一增删 DOM 就失效
- 正确做法：每个语义容器都配一个描述“它是什么”的
class，如<article class="post-item"></article>、<article class="promo-card"></article> -
class名必须独立于标签存在，即使未来换成<section></section>，.post-item依然有意义 - 避免用标签名重复造轮子，比如不用
class="article"——这等于没说任何新信息
class 名必须是“内容角色”，不是“视觉效果”
写 class="red-btn" 或 class="float-left" 看似快，但换主题、改布局时就成了债务。颜色、浮动、间距这些是 CSS 该管的事，class 只负责回答“这个元素在业务逻辑里扮演什么角色”。
使用场景：
• 换肤系统上线后，所有 .primary-btn 能统一通过 CSS 变量切换背景色，而 .red-btn 得逐个改 HTML 或加 hack 类
• 团队新人看到 .search-submit，立刻知道这是搜索表单的提交按钮；看到 .btn-24px，只能猜
- 命名锚点始终是“它是什么”或“它干什么”：
.nav-menu、.error-summary、.product-list-item - 状态类用 BEM modifier：不是
class="success-text"，而是class="message message--success" - 禁用纯样式词：
bold、center、mb-4（除非全项目采用 Utility-First 架构并严格约束）
多个 class 的空格分隔规则常被误读
class="user-profile-card" 是一个类名，不是三个；class="user profile card" 才是三个独立类。这个区别直接影响 CSS 复用能力和 JS 绑定逻辑。
常见错误现象：
• 把 class="btn primary large" 当作层级关系，却没定义 .primary 和 .large 的通用规则，导致复制粘贴一堆重复样式
• 在 JS 里用 el.classList.contains('btn-primary') 查找，但 HTML 写的是 class="btn-primary"（单一名），结果永远返回 false
- 多个语义职责用空格分开：
class="btn btn--primary btn--block"，每个都有独立样式规则 - 短横线（-）只用于单个类名内部，是 kebab-case 规范的一部分，不是分隔符
- JS 操作 class 时，优先用
el.classList.add("btn", "btn--primary")，而不是拼字符串
id 与 class 的分工边界容易模糊
id 不是“高级 class”。它天生要求全局唯一，且一旦用于 JS 绑定或 aria-labelledby 关联，就承担了结构性责任，不能随意改动。
性能影响：
• CSS 中过度用 #header-nav 选择器，会阻塞部分浏览器的样式计算优化路径
• 同一页面出现两个 id="main"，会导致 document.getElementById("main") 返回第一个，无障碍工具也会报错
-
id只用于三类场景：锚点跳转（<a href="#contact"></a>）、JS 强绑定目标（document.getElementById("form")）、ARIA 属性关联（aria-labelledby="title-id"） - 样式控制一律走
class，哪怕只有一个元素也别用id写 CSS - 线上项目中修改
id值，必须同步检查所有 JS、SEO 锚点、无障碍声明
真正难的不是记住规则，而是每次敲下 class="" 时，先问一句：这个名，三个月后别人看代码能懂它干啥吗？
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
