应使用语义化单类名（如.sidebar__link--active）替代多层嵌套选择器，避免高特异性、提升可维护性；优先用CSS自定义属性和:is()等现代特性控制样式，禁用!important与ID选择器。
用类选择器代替嵌套后代选择器
过度特化最常见表现就是写成 .sidebar .list .item .link.active 这种四层嵌套。浏览器从右向左匹配时，先找所有 .active 元素，再逐级向上验证父元素是否符合，DOM 一动就失效，性能也差。
直接改用单个语义化类名更可靠：.sidebar__link--active。它不依赖结构，也不放大特异性权重（仍是 0,0,1,0），后续加新布局也不会崩。
- 别靠父容器类名控制样式，比如
.dark-theme .btn—— 应该用.btn--theme-dark - 如果真需要限定作用域，用 CSS
:scope或现代框架的 scoped style，而不是靠多层 class 堆叠 - 检查现有 CSS，把含空格的选择器（如
nav ul li a）批量替换成.nav-link类
警惕高权重伪类和组合符滥用
:not(:disabled):focus-visible:hover 看似精确，实则三重伪类叠加让特异性升到 0,0,3,0，还可能触发冲突逻辑（比如 :focus-visible 和 :hover 同时生效导致意外样式覆盖）。
多数场景下，.btn:hover 或 .btn:focus 就够用；:focus-visible 单独抽成一条规则更安全。
-
:not()内部不能提升权重，但外面套的伪类会算，a:not([href])权重仍是 0,0,2,1 - 避免
div#main > section:first-child > h2[role="title"]这类混合 ID + 属性 + 伪类 + 子组合器的写法，权重飙升且难维护 - 用
:is()替代重复列举（如:is(h1, h2, h3).section-title），它不增加特异性
用自定义属性替代高特异性覆盖逻辑
遇到“深色模式下按钮变红”这种需求，别写 .dark-theme .btn--danger { color: red; } —— 这又引入一层嵌套，还让 .dark-theme 成为强制依赖。
改用 CSS 自定义属性驱动：.btn--danger { color: var(--danger-color, #d32f2f); }，然后在根或主题 wrapper 上设 :root { --danger-color: #e53935; } 或 .theme-dark { --danger-color: #f44336; }。
- 所有颜色、间距、圆角等可变值，优先走
var(--x)，而非靠更高权重选择器覆盖 - 不要用
!important去压特异性，它会让调试变成盲猜 - BEM 中的修饰符（如
--disabled）应独立声明，不和状态类耦合（拒绝.btn--primary.is-disabled）
检查特异性是否失控的简单方法
打开 DevTools 的 Styles 面板，看某条样式被划掉的原因：如果是 “specificity” 而非 “invalid property”，说明你正被自己写的高权重选择器反噬。
用浏览器扩展（如 CSS Peeper）或命令行工具（如 specificity npm 包）快速计算：header nav a:hover 是 0,0,2,1，而 .nav-link:hover 是 0,0,2,0 —— 差一个元素选择器，就少一分风险。
- 只要出现 ID 选择器（
#user-panel），就要问：这个元素真的全局唯一且永不复用吗？ - 用
[data-role]替代深度嵌套，[data-role="cta-button"]权重仅 0,0,1,0，且 DOM 移动无影响 - 重构时优先删
!和>，它们是特异性隐形推手
真正难的不是写出高权重选择器，而是发现它已在几十个组件里悄悄蔓延——每次加新样式前，花 10 秒扫一眼当前选择器的权重构成，比后期 debug 快十倍。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
