打开一个网页，等三秒才加载出样式？鼠标悬停半天没反应？别急着怪网速——十有八九是 CSS 拖了后腿。尤其在手机上，一条冗长的选择器、一段没节制的动画，都可能让页面卡得像老式翻盖机。
删掉那些“看起来很酷”的选择器
比如：.container .sidebar .widget .title span:last-child，这种嵌套五六层的选择器，浏览器要从右往左反复回溯匹配，性能损耗不小。换成直接加类名更干脆：
<span class="widget-title-last">最新动态</span>类名命名不求高大上，只求好找、好查、好删。
避免用 @import 引入样式表
写在 CSS 里的 @import url('theme.css'); 等于告诉浏览器：“先别急着干活，等我喊你再动。”它会阻塞并串行加载，比 <link> 标签慢一拍。直接在 HTML 里用 link 引入：
<link rel="stylesheet" href="base.css"><link rel="stylesheet" href="theme.css">动画别乱用 transform 和 opacity 以外的属性
给 width 或 background-color 加 transition，浏览器每次都要重排（reflow）+重绘（repaint），卡顿感立马出来。换成 transform: scaleX(1.2) 或 opacity: 0.8，走的是合成层（compositor），GPU 直接接管，丝滑很多。
媒体查询别堆在文件末尾
有人习惯把所有响应式规则全扔在 CSS 最底下，结果小屏设备也得把整张大文件下载完再过滤。把关键断点（比如 max-width: 768px）对应的样式就近写在对应模块后面，配合 media 属性提前分流：
<link rel="stylesheet" media="(max-width: 768px)" href="mobile.css">慎用通配符和全局重置
* { box-sizing: border-box; } 虽然省事，但浏览器得遍历全部节点，对首屏渲染有微小但可测的延迟。改用更精准的写法：
html { box-sizing: border-box; }*, *::before, *::after { box-sizing: inherit; }既保住了效果，又缩小了作用范围。
删除无用 CSS 别靠猜
上线前用 Chrome DevTools 的 Coverage 面板（Ctrl+Shift+P → 输入 “Coverage”），刷新页面就能看到哪些 CSS 字节压根没被用到。再配合 PurgeCSS 工具自动剔除，一个项目常能砍掉 30%～50% 的无效样式代码。
字体加载别让它拖慢渲染
自定义字体默认会触发 FOIT（Flash of Invisible Text），空白几秒太伤体验。加个 font-display: swap;：
@font-face { font-family: 'PingFang SC'; src: url('pingfang.woff2') format('woff2'); font-display: swap;}系统字体先顶上，等自定义字体加载完再平滑替换，用户根本感觉不到断层。