减少选择器的复杂度
很多人写CSS时喜欢层层嵌套，比如 .header .nav .menu li a:hover 这种写法。虽然能实现效果，但浏览器解析起来特别慢。越复杂的选择器，匹配消耗的时间越多。建议尽量使用类名直接定义，像 .nav-link 这样简单明了，既好维护又高效。
避免使用通配符选择器
有些人为了省事，开头来一句 * { margin: 0; padding: 0; }。这看似方便，其实会让页面上每一个元素都执行一次样式计算，尤其是元素多的时候，卡顿感明显。可以用更精准的重置方式，比如只对常用标签设置：
<style>
body, h1, h2, h3, p, ul, ol, li {
margin: 0;
padding: 0;
}
</style>精简和合并CSS文件
一个项目里如果引入了五六个CSS文件，浏览器就得发起多次请求，拖慢页面打开速度。可以把常用的样式合并成一个文件，减少网络请求次数。比如把公共样式、按钮、布局这些打包成 main.css，既能加快加载，也方便管理。
善用CSS属性继承
有些样式是可以继承的，比如字体、颜色。如果整个页面用同一款字体，没必要每个元素都写一遍 font-family。在根元素上设置就行：
<style>
body {
font-family: 'PingFang SC', sans-serif;
}
</style>子元素会自动继承，代码少了，渲染也快了。
避免频繁重排和重绘
改变元素的宽高、位置等布局属性时，浏览器需要重新计算布局（重排）甚至重新绘制画面（重绘），非常耗性能。比如轮播图动画，别用 top 或 left 来移动，改用 transform: translateX()，GPU会接管这部分工作，动画更顺滑。
使用CSS精灵图减少图片请求
一个页面上有十几个小图标，每个都是单独图片，加载起来零散又慢。以前做电商详情页就遇到过这个问题。后来把所有小图标拼成一张大图，通过 background-position 显示对应部分，请求从十几个变成一个，速度快了一大截。
按需加载非关键CSS
首页不需要一开始就加载打印样式或暗黑主题的CSS。可以把这些非首屏必需的样式异步加载，或者用媒体查询延迟加载，比如：
<link rel="stylesheet" href="print.css" media="print">这样打印机要用时才下载，不影响正常浏览体验。