减少选择器的复杂度
很多人写CSS时喜欢层层嵌套，比如 .header .nav .menu li a 这样一长串。浏览器解析时是从右往左匹配，这种写法会让它逐层回溯，拖慢渲染速度。不如简化成 .nav-link 这样的类名，直接命中元素，效率高多了。
就像找人一样，与其说“穿蓝衬衫、背黑包、坐在第三排的那位”，不如直接叫名字来得快。
避免使用通配符和深层嵌套
像 * { margin: 0; padding: 0 } 这种全局重置虽然省事，但代价是作用到页面每一个元素，哪怕不需要也会执行。建议改用更精准的重置方式，或者用现代CSS Reset方案如 normalize.css。
深层嵌套在预处理器里很常见，比如Sass写多了会不自觉地套好几层。导出后的CSS可能生成 .container ul li div span 这种“超长身份证”，浏览器处理起来负担不小。
精简关键路径上的CSS
首屏内容决定用户第一印象。如果首页头部只显示一个标题和按钮，却加载了整站的CSS文件，那多余代码就成了累赘。可以把首屏需要的样式内联到HTML的 <style> 标签里，其余异步加载。
比如做促销活动页，没必要把个人中心、文章详情的样式一股脑塞进去。按需拆分，谁用谁加载。
<style>\n .hero-banner { background: #ff6b6b; color: white; }\n .cta-btn { padding: 12px 24px; border: none; }\n</style>\n<link rel="stylesheet" href="non-critical.css" media="print" onload="this.media='all'">利用硬件加速合理提升动画性能
做动画时别总用 top、left 或 width 这些属性，它们触发的是重排和重绘，开销大。换成 transform 和 opacity，浏览器会交给GPU处理，流畅很多。
比如一个弹窗淡入滑动效果：
.popup {\n opacity: 0;\n transform: translateY(20px);\n transition: all 0.3s ease;\n}\n\n.popup.show {\n opacity: 1;\n transform: translateY(0);\n}这样改动的只是图层合成，不会牵连其他元素布局。
删除无用CSS代码
项目迭代久了，总会留下没人敢删的“祖传代码”。有些类名早已不用，但仍占着位置。Chrome DevTools 的 Coverage 工具可以帮你扫描哪些CSS没被加载或使用。
曾经有个客户网站，主样式表有120KB，清理后只剩43KB。加载时间从1.8秒降到0.9秒，肉眼可见变快。
使用CSS自定义属性要谨慎
变量（custom properties）写起来很爽，比如 --primary-color: #007acc，但过度使用也可能影响性能，尤其在大量动态计算的场景下。每个变量修改都可能触发整个文档的样式重计算。
局部用没问题，但如果全靠变量堆砌主题切换，还得搭配懒加载或分块策略才稳妥。
压缩与合并生产环境CSS
上线前记得把多个CSS文件合并成一个，减少HTTP请求数。再用工具如 CSSO 或 PurgeCSS 压缩剔除空白和重复规则。
举个例子，开发时分了三个文件：reset.css、layout.css、theme.css，上线前打包成 style.min.css，体积小了一半，请求次数也从三次变成一次。