Lighthouse建议移除未使用的CSS，但我这段代码明明在用啊？

博主泉润提问于 2026-03-16 09:53:21 阅读 46

工具

我用Lighthouse跑分时提示“移除未使用的CSS”，但下面这段样式我在页面里确实用到了，比如 .hero-banner 类在首页首屏就有。是不是Lighthouse判断有误？还是我哪里理解错了？

.hero-banner {
  background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
  padding: 4rem 2rem;
  color: white;
  text-align: center;
}
.hero-banner h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

我已经确认 HTML 里有对应的元素，而且 DevTools 里也能看到样式生效了，但 Lighthouse 还是把它标成未使用。这到底该怎么处理？

我来解答赞 6 收藏

反馈

2 条解答

UE丶珂簪 Lv1

可能是Lighthouse检测机制的问题，确保你的CSS文件加载顺序正确，或者试试看用内联样式或者关键CSS解决。要是还不行，忽略这个警告就行了。

2026-03-21 16:05

闲人殿洁 Lv1

Lighthouse的检测逻辑是基于静态分析和初始渲染的，如果你的.hero-banner是通过JS动态插入到DOM的，或者只在特定视口/交互下出现，它就会误报。

懒人方案：直接在CSS里加注释让工具忽略，同时确保样式确实在用就行：

/* Lighthouse sometimes falsely reports this as unused when rendered via JS or on specific viewports */

.hero-banner {

  background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);

  padding: 4rem 2rem;

  color: white;

  text-align: center;

}

.hero-banner h1 {

  font-size: 2.5rem;

  margin-bottom: 1rem;

}

如果用的是PurgeCSS这类工具，可以加 /*! purgecss ignore next */ 注释。

或者更直接——别管这个警告，分数这东西，差不多得了。

2026-03-16 20:14