应限制CSS选择器嵌套不超过2层，优先用语义化类名（如.nav-link）替代深层嵌套；避免复杂属性选择器与伪类组合，改用状态类（如.tooltip.is-hovered）；类名须表意功能而非样式，统一前缀防冲突。
选择器嵌套层级别超过 3 层
超过 .header .nav .item .link 这种四级写法，人眼识别成本陡增，维护时容易误删中间某层或漏加类名。浏览器解析也变慢——CSS 选择器是从右往左匹配的，.link 虽然唯一，但引擎仍得回溯检查每个匹配元素是否真在 .nav 内且父级是 .header。
- 把深层结构拆成独立、语义明确的类名，比如用
.nav-link替代.header .nav .item .link - 避免依赖 HTML 结构深度，改用 BEM 风格：
.nav__item--active比.nav .item.active更直白、更可控 - 如果必须嵌套（如主题切换），限制在 2 层内：
.theme-dark .button可接受，.theme-dark .container .sidebar .button就该重构
慎用属性选择器和伪类组合
[data-role="tooltip"]:hover::before 这类写法在调试时很难一眼看出作用对象，而且部分旧版 Safari 对复杂伪类链支持不稳定。它还容易和 JS 的 dataset 操作耦合过紧，改个属性名就得同步修 CSS。
- 优先用类名表达状态：
.tooltip.is-hovered::before比靠属性 + 伪类更易追踪 - 如果必须用属性选择器，只用于明确的“非样式职责”场景，比如
[hidden]或[aria-disabled]，且不叠加多个伪类 -
:not()尽量只接单个简单条件：:not(.disabled)安全；:not(.btn:not(.primary))已经难读且易出错
类名命名要反映用途，不是样式结果
写成 .red-text 或 .mt-8 看似快捷，但一旦设计改了红色、或间距调整为 12px，这个类名就变成“谎言”。团队协作时，新成员看到 .pad-l 根本不确定它作用于哪个方向、多少像素、是否响应式。
