应限制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 根本不确定它作用于哪个方向、多少像素、是否响应式。
- 用功能/角色命名：
.error-message、.search-input、.card-footer - 避免纯样式词：删掉所有
bg-、text-、flex-开头的实用类（除非你明确在用 Tailwind 这类原子 CSS 框架） - 统一前缀防冲突：
u-hidden（工具类）、js-toggle（仅供 JS 绑定，无样式）、is-open（状态类）
.search-form {
display: flex;
}
.search-form__input {
flex: 1;
padding: 0.5rem;
}
.search-form__submit {
background: var(--brand-blue);
border: none;
padding: 0.5rem 1rem;
}
真正难的不是写对选择器，而是让下一个人打开文件时，不用翻 HTML 就能猜出 .search-form__submit 控制的是哪个按钮，以及改它会不会意外影响弹窗里的提交按钮。可读性损耗往往发生在“当时觉得没问题”的那几处缩写和捷径上。
立即学习“前端免费学习笔记（深入）”；
