应优先使用属性选择器、CSS自定义属性、简化伪类及BEM命名来优化CSS：用[data-role="section-title"]替代深嵌套类名，提取公共值为--text-primary等变量，删减无效伪类，以.user-card__link--active等命名提升可维护性。
用属性选择器替代长类名链式写法
当出现 .card .header .title .text--large 这类嵌套过深的选择器，实际往往只是想选“带 data-role=‘title’ 的文本元素”，直接改用属性选择器更稳定、更短。CSS 层级越深，浏览器匹配开销越大，也越容易被意外 DOM 变动打断。
- 把语义化信息挪到
data-属性里，比如<h2 data-role="section-title"> - 对应写成
[data-role="section-title"]，长度从 40+ 字符降到 25 字符以内 - 避免用
.container .wrapper .content .main .text p，这种结构一动就全挂，换成p[data-type="lead"]更可靠
合并重复声明，用 CSS 自定义属性统一控制变量
多个选择器共用相同颜色、间距或圆角？别反复写 color: #333; margin: 1rem; border-radius: 4px;。冗余不仅在选择器长度，更在声明重复上。
- 提取公共值为自定义属性，例如：
:root { --text-primary: #333; --space-md: 1rem; --radius-sm: 4px; } - 所有用到的地方改用
color: var(--text-primary); margin: var(--space-md); border-radius: var(--radius-sm); - 后续换主题时，只改
:root里几行，不用 grep 全项目找#333
警惕过度具体化的伪类和组合符
nav ul li a:hover:not(:disabled):focus-visible 看似精确，但多数场景只需 nav a:hover 或 nav a:focus。过度限定会拖慢渲染，也增加维护成本。
-
:not(:disabled)在<a>上基本无效（<a>没有disabled属性），属于无效代码 -
ul li a可简化为nav a—— 如果<a>确实只在<nav>内使用 -
:focus-visible是好东西，但和:hover同时写在一条规则里，可能触发意外交互逻辑，建议拆成两条独立规则
用 BEM 命名约束选择器复杂度
BEM 不是银弹，但能强制你思考“这个样式到底属于哪个模块”，从而天然抑制嵌套和魔数类名。关键不是严格守规范，而是用命名反推结构合理性。
立即学习“前端免费学习笔记（深入）”；
- 看到
.user-card__header__title--highlighted就该警觉：是不是--highlighted其实该抽成独立修饰符.user-card__title--highlighted？ - 拒绝
.sidebar .list .item .link.active，改用.sidebar__link--active，既短又可预测 - 一旦发现要靠父容器类名（如
.dark-theme .btn）才能生效，说明样式没内聚，应改用.btn--theme-dark这类显式修饰符
