Question

我正在将我的关键CSS添加到头部，然后推迟其余部分。将CSS添加到头部时，我是否还应该从主CSS工作表中删除该CSS或保留原样？

例如：

<head>
     <style>
         .red{color: red;}
         .yellow{color: yellow;}
     </style>
</head>

我的CSS工作表：

.red{color: red;}
.yellow{color: yellow;}
.black{color:black;}
.orange{color:orange}
.green{color:green}

那么，我应该从CSS工作表中删除.red和.yellow类吗？我本来想是的，但是我在主工作表中遇到了一些覆盖问题，并且想知道这是否是删除它们的标准技术。

谢谢。

Answer 1

将.red{color: red;} .yellow{color: yellow;}保留在样式表中，但也应将它们包括在<head>中，这样浏览器就不必等待样式表使用<head>部分中的代码加载和呈现元素。如果这些规则没有在其他页面上开始使用，则可以将其删除以节省文件大小。

基本至关重要的CSS是尽快在折叠内容上方进行渲染，因此，如果您提早提供样式，那就更好了。

如果CSS的文件大小小于20kb，则应内联所有CSS规则。

Answer 2

大多数浏览器在获取样式表之前不会显示页面，因此将部件移到style标签上的弊大于利，因为现在必须在两个地方进行样式设置保持。 This post讨论了跨不同浏览器的这种行为以及推迟CSS的方法。

但是接下来的问题是，这是您必须考虑的非常关键的性能考虑因素吗？样式表通常具有几十个KB，而如今的带宽需要花费几毫秒的时间才能下载。如果这对您来说很重要，那么您可以从上面的链接中受益，因为您的方法将导致不同浏览器产生不同的结果。