直接用header或nav写css易出问题，因浏览器不提供默认样式且纯元素选择器优先级低、易被覆盖；多nav场景会样式串扰，第三方库规则常胜出；旧ie需html5shiv支持；应改用语义化class如.primary-nav限定作用域。
为什么直接用 header 或 nav 写 CSS 容易出问题
浏览器对 header、nav、main 这些标签**不提供默认样式**，只做结构识别。你写 nav { display: flex; } 看似简洁，但一旦页面里出现多个 nav（比如页头导航 + 页脚快捷链接 + 文章内相关推荐），样式就全串了。
更麻烦的是，第三方库或重置 CSS（如 Normalize.css）常带高权重规则，比如 nav ul { margin: 0; }，你的 nav ul { list-style: none; } 可能根本不起作用——这不是语义错了，是选择器优先级输了。
- 避免纯元素选择器全局生效，尤其在组件化或 CMS 页面中
- 若必须用元素选择器，加父容器限定，例如
.site-header nav或article nav - 旧版 IE（≤8）根本不认识这些标签，没
html5shiv时内容可能直接不渲染
class 名该描述“它是什么”，而不是“它长什么样”
写 class="red-btn" 或 class="float-left" 是危险信号：颜色改了、布局换了，类名就失效甚至误导人。真正可维护的命名应反映内容角色或功能意图。
-
class="primary-nav"比class="top-menu"更稳定——即使它被移到侧边栏，语义未变 -
class="post-card"比class="box-2"更易协作——别人一眼看懂这是文章卡片容器 - 遇到需要区分状态时，用 BEM 的 Modifier，例如
class="button button--disabled"，而非class="button disabled"
什么时候该用 data- 属性代替 class
data- 不是样式工具，而是语义元数据载体。当某个属性只用于 JS 行为控制或后台逻辑，和视觉无关，就别塞进 class。
比如一个按钮要触发模态框，但设计系统里 class="btn" 已定义所有外观，硬加 class="modal-trigger" 就污染了样式层。
- 正确做法：
<button data-modal-target="login">登录</button>，再用[data-modal-target]写 JS 逻辑或轻量样式 -
data-选择器性能略低于class，别用它写高频重绘样式（如动画关键帧） -
[data-open]:hover合法，但[data-open]不会随 JS 修改dataset自动重绘伪类——得靠 class 切换才可靠
嵌套语义标签时，CSS 选择器怎么写才不脆弱
写 main > article > section > h2 看似精准，实则一碰就断：CMS 插入广告模块、编辑误删 section、组件升级改结构，整条链就失效。
真正健壮的方式是把关键样式锚定在有明确语义+稳定 class 的节点上。
- 给核心区块加 class，例如
<article class="blog-post"></article>，然后写.blog-post h2，不依赖外层标签 - 用
article > header > h1可以，但前提是header是article的必需子元素（HTML5 规范允许），且项目约定不破坏此结构 - 避免跨多层用元素选择器组合，例如
nav ul li a—— 改成.nav-list a更可控
语义标签是骨架，class 是关节润滑剂。骨架不会自己动，动的是你加在关节上的力——也就是那些带明确意图的类名和克制的选择器。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
