打开一个网页，等了好几秒才看到内容，多半是前端资源拖了后腿。CSS 虽然看起来只是改改颜色和布局，但如果写得不够讲究，照样能让页面卡成幻灯片。
减少选择器的复杂度
很多人喜欢用嵌套层级来写样式，比如 .header nav ul li a:hover 这样的选择器。浏览器是从右往左解析的，这意味着它要先找到所有 a 标签，再逐层往上判断是否符合条件。层级越深，计算量越大。
更高效的做法是使用简单的类名：
<!-- 推荐写法 -->
<a href="#" class="nav-link">首页</a>
.nav-link {
color: #007bff;
}
避免频繁重排与重绘
每次修改元素的几何属性（如宽高、位置），浏览器都要重新计算布局，这叫重排；而改变颜色、背景这类不影响结构的操作，只会触发重绘。重排的开销远大于重绘。
如果要做动画，尽量用 transform 和 opacity，它们能被 GPU 加速，不会引起重排。
.box-move {
transition: transform 0.3s ease;
}
.box-move:hover {
transform: translateX(20px);
}
精简并合并 CSS 文件
一个页面引用五六个 CSS 文件，每个都要发起 HTTP 请求，加载时间自然拉长。尤其是在移动端网络不稳定时，多一次请求就多一份风险。
可以把公共样式打包成一个文件，通过构建工具（如 Webpack 或 Vite）自动合并。同时删掉项目中没用到的“僵尸代码”，比如早就废弃的组件样式。
使用媒体查询优化加载
打印样式表没必要在屏幕上加载，屏幕样式也不该在打印时生效。利用 media 属性按需加载：
<link rel="stylesheet" href="print.css" media="print">
<link rel="stylesheet" href="screen.css" media="screen">
这样浏览器会根据当前环境决定是否下载对应资源，减少无谓消耗。
善用 CSS 自定义属性但别滥用
自定义属性（变量）让主题切换变得方便，但过度使用也会带来性能负担。尤其是把变量放在高频更新的元素上，每次变更都会触发样式重新计算。
建议只在全局配置处使用，比如颜色、间距这些统一管理的地方：
:root {
--primary-color: #007bff;
--spacing-sm: 8px;
}
.btn-primary {
background-color: var(--primary-color);
}
关键 CSS 内联处理
首屏内容的样式最重要，如果还要等外部 CSS 下载完才能渲染，用户看到的就是一片空白。把首屏必需的 CSS 直接写进 HTML 的 <style> 标签里，能显著提升首屏速度。
比如文章页的标题、作者信息这些核心元素的样式，提前内联，用户进来就能看到内容，而不是干等。