class名用header比top-bar更可靠，因html和可访问性工具认语义标签而非视觉描述；应优先用html5元素+功能/位置语义class，避免纯视觉命名，分层处理结构与样式。
为什么 class 名叫 header 比 top-bar 更可靠
因为浏览器不认“顶部条”，但 HTML 和可访问性工具认 header。语义 class 不是给人看的别名，而是给结构定型的锚点——它让 header、main、aside 这些区域在无样式时仍能被屏幕阅读器、搜索引擎和后续维护者快速识别。
实操建议：
- 优先复用 HTML5 元素语义，再补 class：比如用
<header class="site-header"></header>，而不是<div class="top-bar"> <li>避免纯视觉描述：<code>red-btn、big-title会随着设计迭代失效；改用功能/位置语义：primary-cta、page-heading - 层级嵌套时，用连字符分隔作用域：
article-meta-author比author更不易冲突，也比article__author（BEM）更轻量且无需额外规则约束 -
main区域缺失或被多个div套叠替代，导致键盘 tab 顺序混乱、SEO 内容权重分散 -
nav被写成div class="menu"，屏幕阅读器无法触发导航快捷键（如 NVDA 的N键跳转） - 整个页面只有
container和row，没有一个 class 表达“这是文章正文”或“这是侧边推荐栏” - 必须加业务或上下文前缀：
user-card、product-card、testimonial-card - 如果同一页面存在多种卡片，用二级语义强化区分：
user-card-avatar、user-card-bio，而不是靠后代选择器.card img——后者一旦结构微调就断 - 禁止用
card当唯一 class；至少搭配一个位置或角色类：<article class="user-card site-main__section"></article> - 结构层 class（必选）：
user-card、product-list—— 只定义区块职责，不写样式 - 修饰层 class（可选）：
is-highlighted、has-shadow—— 纯视觉增强，可叠加 - 实际 CSS 写在修饰层上：
.has-shadow { box-shadow: 0 2px 4px rgba(0,0,0,.1); }
怎样一眼看出页面有没有漏掉关键语义区域
打开浏览器开发者工具，切到 Elements 面板，按 Ctrl+F（或 Cmd+F）搜这些关键词：header、main、nav、article、section、footer。如果只找到零星几个、或者全是 div class="wrap" 类型，说明结构正在退化为“CSS 容器驱动”而非“内容驱动”。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
class="card" 到底该不该用？什么情况下必须加前缀
card 是个高危通用词：它不指代位置、功能或内容类型，只描述视觉样式。单独使用 class="card" 会让团队成员无法判断这个区块是“用户资料卡”还是“商品预览卡”，更无法写出精准的 JS 选择器（比如 document.querySelectorAll('.card') 可能误选广告位）。
实操建议：
用语义 class 后，CSS 文件反而更难维护？怎么破
不是语义 class 导致难维护，是把语义 class 当作样式钩子直接写 CSS 造成的。比如写 .user-card { margin: 1rem; border: 1px solid #eee; }，等于把视觉规则和结构绑定死了——哪天要让某个 user-card 不带边框，就得加 !important 或覆盖选择器。
正确做法是分层：
.user-card {
/* 仅声明这是用户卡片区域，不设样式 */
}
<p>.user-card.is-highlighted {
background-color: #f8f9fa;
}</p><p>.user-card.has-shadow {
box-shadow: 0 2px 4px rgba(0,0,0,.1);
}语义 class 的真正成本不在命名，而在拒绝用 class “偷懒”代替结构思考——比如看到轮播图就写 class="slider"，却不问一句：“这是首页 banner，还是文章内嵌推荐？是否需要独立 SEO 标题？是否允许被禁用 JavaScript 后降级为静态列表？” 这些问题的答案，才该决定 class 名。
