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