直接删掉重复样式、拆掉嵌套过深的选择器、把易变值抽成变量——这三步做完，CSS 文件体积通常能降 30% 以上，维护成本直线下降。
用类组合替代重复声明
多个组件共用 padding、border-radius、font-size 等基础样式时，硬写两遍就是冗余。浏览器不关心你写了几次，但人要改的时候得满项目搜 .card 和 .modal 里哪句 border-radius: 8px 漏改了。
- 把通用视觉属性（如
padding、line-height、transition）抽成独立工具类，比如.pad-sm、.rounded - 避免在不同块级选择器里重复定义同一组属性，例如
.header nav a和.footer nav a都设了text-decoration: none，就该提成.nav-link - 慎用
@apply封装 utility class：它会丢失响应式断点（如md:text-lg在小屏下仍生效），真要复用，优先用预处理器的@mixin或 CSS 自定义属性
限制嵌套层级，别让选择器失控
嵌套超过 3 层（如 .page .main .content .item .title）不仅难读，还会拖慢浏览器匹配速度——CSSOM 构建阶段要逐层比对 DOM 节点，越深越慢，且极易因结构微调导致样式失效。
- Sass/Less 中嵌套建议控制在 3 层内，超过就该拆成独立类或用 BEM 命名（如
.card__header而非.card .header） - 后代选择器（空格）比子选择器（
>）更慢，尤其当父容器是div这类无语义标签时，尽量用有意义的类名直接命中 - 检查构建产物：如果最终 CSS 里出现
div ul li a:hover这种模式，基本可以判定是嵌套失控或未启用 PurgeCSS 清理
用变量和 mixin 管理易变值
颜色、间距、断点这些值散落在各处，改一个主题色要手动搜 17 处 #007bff？这不是写代码，是找茬。
- 所有可变值必须进变量文件，如
_variables.scss里定义$spacing-md: 1rem、$breakpoint-md: 768px - 交互逻辑（如按钮悬停变暗）用
@mixin封装，而不是复制粘贴transition+background-color组合 - 避免
@import，改用@use "variables" as *;，防止变量污染和重复引入 - 注意：CSS 自定义属性（
--color-primary）适合运行时动态换肤，但编译期变量（Sass/Less）更适合构建时静态优化，二者别混用错场景
真正容易被忽略的是 content 配置——PurgeCSS 不知道你 JS 里拼出来的类名（如 class=${type}-btn），也不会扫 Vue 的 <style scoped> 里的绑定表达式。漏配 = 生产环境样式消失，不是代码写错了，是工具根本没看到你写的类。
立即学习“前端免费学习笔记（深入）”；
