class和data-选择器比嵌套标签选择器更快更稳定，因浏览器css匹配从右向左，class可哈希查找，data-解耦样式与状态；id选择器应禁用，仅用于锚点或aria。
直接用 class 和 data-* 属性写 CSS 选择器，比靠嵌套层级或标签名匹配快得多，也更稳定。
为什么 class 选择器比标签+类组合更快
浏览器匹配 CSS 时，是从右往左解析的。写成 nav ul li a 这种长链，意味着它得先找所有 a，再逐层向上验证父级是否符合，开销大且易受 DOM 变动影响。
换成 .nav-link，浏览器直接哈希查找所有带该 class 的元素，一步到位。
- 避免用
div.content p.title，改用.content-title或.title--content - 不要依赖 HTML 标签语义来“猜”样式作用域，比如认为
article h2一定安全——换个人改结构就崩 - 类名加前缀（如
js-、theme-）不参与样式，但能明确区分用途，减少误删风险
data-* 属性怎么当选择器用又不拖慢渲染
data- 属性本身不触发重排重绘，但作为 CSS 选择器使用时，性能略低于 class（因需字符串匹配），只要不用在高频动画元素上，完全可接受。
它的真正价值是解耦：样式逻辑和业务状态分离。比如按钮禁用态，别写 .btn.disabled，改用 button[data-state="disabled"]。
- 推荐写法：
button[data-loading="true"] { opacity: 0.6; pointer-events: none; } - 避免写
[data-user-id="123"]这种精确值匹配——CSS 引擎没法索引，每次都要遍历比对 - 用布尔型
data-更高效，如data-open（有该属性即为 true），对应选择器[data-open]
ID 选择器在 CSS 中基本该禁用
#header 看似方便，但它强制唯一、不可复用，还带来高特异性（0,1,0,0），后续想覆盖就得加 !important 或堆更多 ID，很快失控。
现代项目里，id 应只用于锚点跳转（<a href="#section1"></a>）或 ARIA 关联（aria-labelledby），而非样式控制。
- 如果你真需要“唯一性样式”，用
class="header--main"+ BEM 命名，语义和复用都不丢 - JS 操作 DOM 时仍可用
id，但 CSS 规则里出现#就该警觉 - 工具如 Stylelint 可配规则
selector-max-id: 0直接拦截
最常被忽略的一点：全局属性不是“锦上添花”，而是选择器可靠性的基础设施。一个没加 class 的 div，在 CSS 里几乎等于不可控；而一个带 data-status 的按钮，哪怕 DOM 结构重构，样式依然稳。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
