优化 CSS 代码不仅能提高页面加载速度，还能减少渲染阻塞、降低维护成本。以下是从性能、可维护性和渲染效率三个维度出发的优化策略：
一、减少 CSS 体积（降低加载时间）
CSS 文件体积越小，下载速度越快，尤其对移动设备和低网速环境更友好。
1. 合并与压缩 CSS
合并文件：将多个分散的 CSS 文件（如 reset.css、common.css）合并为一个，减少 HTTP 请求次数（HTTP/2 多路复用可缓解此问题，但合并仍有意义）。
压缩代码：
移除空格、注释、换行（工具：csso、cssnano、在线工具 CSS Minifier）。
示例：压缩前 body { margin: 0; padding: 0; } → 压缩后 body{margin:0;padding:0}。
生产环境建议开启 Gzip/Brotli 压缩（服务器配置，可减少 60%-80% 体积）。
2. 删除冗余代码
清理未使用的 CSS：
工具：Chrome 开发者工具「Coverage」面板（按 Ctrl+Shift+P 搜索 Show Coverage），可检测未被使用的 CSS 规则；第三方工具如 PurgeCSS 可自动删除未使用的样式（尤其适合配合 Tailwind 等原子化 CSS 使用）。
避免重复定义：同一属性在多个选择器中重复出现时，合并到公共选择器（如 .btn, .link { color: blue; }）。
3. 使用 CSS 预处理器的特性减少代码量
利用 Sass/Less 的变量（$color）、混合（mixin）、嵌套（避免重复父选择器）等特性，减少冗余代码。例：嵌套简化选择器
// 优化前
.nav { ... }
.nav .item { ... }
.nav .item:hover { ... }
// 优化后（Sass 嵌套）
.nav {
...
.item {
...
&:hover { ... }
}
}
二、优化选择器（提高匹配效率）
浏览器解析 CSS 时，按“从右到左”的顺序匹配选择器，低效的选择器会增加渲染引擎的计算成本。
1. 简化选择器，降低特异性
避免过度嵌套：嵌套层级越多，选择器越复杂（如 div.container > ul.list li.item a），匹配效率越低。建议嵌套不超过 3 层。优化：用更具体的类名替代嵌套（如 .list-item-link 替代 ul.list li.item a）。
减少通配符和属性选择器的滥用：
通配符 * 会匹配所有元素，性能较差（尤其页面元素多时）。
属性选择器（如 [class^="icon-"]）比类选择器匹配慢，尽量用类名直接定位（如 .icon-user）。
优先使用类选择器，避免依赖 ID 选择器：ID 选择器权重过高（(0,1,0,0)），难以覆盖，且不利于复用。类选择器（(0,0,1,0)）更灵活，匹配效率与 ID 接近。
2. 避免无意义的选择器组合
例：div#header 中 div 是多余的（ID 已唯一），优化为 #header；
例：.box.box-red 可简化为 .box-red（如果类名已唯一标识）。
三、优化渲染性能（减少重绘与回流）
CSS 样式的修改可能触发浏览器的“回流”（Reflow，布局重计算）或“重绘”（Repaint，样式重渲染），两者都会消耗性能，尤其频繁触发时。
1. 减少回流与重绘
批量修改样式：避免频繁单独修改样式属性，可通过以下方式批量处理：
切换 class 而非直接修改 style 属性（推荐）：
// 优化前（多次回流）
element.style.width = "100px";
element.style.height = "200px";
// 优化后（一次回流）
element.classList.add("active"); // .active { width: 100px; height: 200px; }
使用 documentFragment 或离线 DOM 操作（修改时先脱离文档流）。
避免触发回流的属性：以下属性修改会触发回流（布局计算），应减少频繁修改：
尺寸相关：width、height、margin、padding、border；
位置相关：top、left、position、float；
布局相关：display、overflow、font-size（影响文本布局）。可优先修改仅触发重绘的属性（如 color、background、box-shadow）。
2. 利用 CSS 硬件加速
对动画元素使用 transform 和 opacity，可触发浏览器的 GPU 加速，避免回流，提升动画流畅度：
/* 优化前（可能触发回流） */
.element {
transition: left 0.3s; }
.element:hover {
left: 100px; }
/* 优化后（GPU 加速，无回流） */
.element {
transition: transform 0.3s; }
.element:hover {
transform: translateX(100px); }
⚠️ 注意：过度使用会占用过多 GPU 内存，导致性能下降。
3. 合理使用 contain 属性
contain 属性告诉浏览器，元素的变化不会影响外部布局，可限制回流/重绘范围：
.component {
contain: layout paint; /* 布局和绘制独立，内部变化不影响外部 */
}
四、其他性能优化技巧
关键 CSS 内联将首屏渲染必需的 CSS（关键 CSS）内联到 HTML 的
避免 @import 引入 CSS@import 会阻塞后续 CSS 和 HTML 的解析，且只能在 CSS 文件中使用。改用 标签并行加载多个 CSS 文件（HTTP/2 下效率更高）。
优化字体加载字体文件（尤其 @font-face）加载可能导致文本闪烁（FOIT），可通过 font-display: swap 优化：
@font-face {
font-family: "MyFont";
src: url("myfont.woff2") format("woff2");
font-display: swap; /* 字体加载前显示默认字体，避免空白 */
}
使用 CSS 变量减少重复代码CSS 原生变量（--variable）可集中管理复用值（如颜色、间距），减少代码冗余，且支持动态修改（比预处理器变量更灵活）：
:root {
--primary-color: #2c3e50; }
.btn {
background: var(--primary-color); }
.card {
border-color: var(--primary-color); }
五、可维护性优化（间接提升长期性能）
模块化拆分：按功能（如 reset.css、components/button.css）或页面拆分 CSS，避免单文件过大。
统一命名规范：采用 BEM（block__element--modifier）、OOCSS 等命名规则，减少选择器冲突，降低维护成本。
使用 CSS 框架时按需引入：如 Bootstrap、Tailwind 等框架体积较大，通过定制工具（如 Tailwind Config）只引入需要的模块。
总结
CSS 性能优化的核心思路是：“减小体积 → 提高匹配效率 → 减少渲染开销”。结合工具（压缩、检测未使用代码）和编码规范（简化选择器、避免频繁回流），既能提升页面加载速度，也能让代码更易维护。建议通过 Lighthouse 等性能分析工具（Chrome 开发者工具内置）定期检测 CSS 性能瓶颈，针对性优化。