html - 内嵌网站其他地方未使用的 CSS 是个好主意吗？

Question

我不知道这个问题之前是否有人问过，如果是，请评论该帖子的链接

所以我们有一个相当大的网站，有将近 1000 - 1200 个页面，其中大约 90% 的页面都有独特的英雄横幅和图标类。所以我想知道仅内联英雄横幅的 background-image 属性和 background-postion, width, height 属性图标是否是个好主意，因为这样做会极大地减少我们的 CSS 文件的大小。目前我们有大约 500kb 的 CSS 大小，如果我们这样做，这个文件大小将下降到 200kb，我的样式表中只留下主题样式。除此之外，它将如何影响页面性能/和 First content full Paint。

我的 herobanner 基类

.herobanner{
  min-height: 450px;
  color: #fff;
  position: relative;
  background-image: url(../img/dummy.jpg);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  box-sizing: border-box;
 }

我如何调用横幅

.somebanner{
   background-image: url(../img/background/somebanner);
}

对于图标

.sprite {
  background-image: url(../img/sprite/Teal_Icons.png);
  display: inline-block;
  background-repeat: no-repeat;
 }
 .icon-1{
   background-position: -420px -214px;
   width: 70px;
   height: 69px;
 }

Answer 1

在过去的 5 年里，CSS 格局发生了翻天覆地的变化。有很多很棒的工具可用于在您的元素中实现样式 - 您只需要找到适合您的工作流程的工具即可。稍后会详细介绍。

具体到您的问题，我认为应该非常谨慎地使用内联样式。与大多数其他选项相比，内联样式具有更大的特异性，使编辑更加乏味。在 1000-1200 个页面上对 CSS 进行编辑所花费的时间增加会掩盖您在文件大小方面看到的 yield 。

我不知道您的元素是什么样子，但也许可以查看 SCSS 之类的编译器，查看 JSS，或者 CSS Modules 之类的东西可能适合您。