为什么拥有外部样式表比内部样式表更好？ 除了重用

Question

我一直在为页面写一些CSS作为实习生，然后将CSS放在页面的标题中。 而不是将其放在站点的主CSS文件中。 一个巨大的文件。 与网站的其余部分相比，该页面具有许多独特的样式。 我收到了我工作所在的外部承包商的电子邮件。 要求将样式移入主文件。 有什么特别的原因我应该这样做。 我不介意将其移动到除主文件之外的外部CSS文件中。 我真不明白为什么这就是他所说的“标准最佳实践”。

据我所知，唯一的区别是外部可以重复使用，我想坚持自己的看法。 但与此同时，我也热衷于理解这个家伙的想法，因为他更有经验。

如果有人可以向我解释为什么使用外部样式表是最佳实践。 我很少在网站上看到内部样式表，因此我想对此应该有一定的逻辑。

谢谢！

Answer 1

在某些情况下，您的页面将具有动态内容。 因此，它不能被缓存。 通过将css添加到标头中，可以增加必须使用的带宽量。 拥有单独的样式表可以通过缓存减少带宽消耗。

另外，样式表可以并行加载，因此外部样式表可以加快页面加载速度。

Answer 2

许多页面重复使用相同的CSS。 因此，浏览器可以缓存外部样式表并在每个页面上重复使用，这将导致较低的开销和更快的页面加载速度。

如果全局CSS是内联的，则将为每个页面加载它，这将导致大量的开销，并且不必要增加连接和浏览器的负担。

但是，有很好的理由可以内联某些 CSS，也可以将其归类为“关键” CSS。 外部CSS样式表具有渲染功能，因此在所有CSS均已下载之前，它不会应用您的样式。 对于大型的全局外部CSS文件，有时您会注意到浏览器应用样式（也称为FOUT [无样式文本的Flash]）之前的延迟。 提议的解决方案是将关键CSS内联在折叠上方，以便快速应用这些样式。 然后，在页面准备好后，允许浏览器应用其余的CSS。

FOUT在移动连接上更加引人注目，在当今移动流量每天都在增加的时代，重要的是要考虑这些做法以改善移动体验。

阿迪·奥斯曼尼（Addy Osmani）撰写了一篇很棒的文章“检测出关键的CSS超出常规”，这将使您更好地理解这种做法及其好处： http : //addyosmani.com/blog/detecting-critical-above-the-用保罗金兰视频折叠css /

Answer 3

除了Franz的答案，将结构，逻辑和显示代码分离是一种最佳实践。 这是MVC背后的驱动力-它使代码更具可维护性。

Answer 4

要设置网页或博客主题的格式，可以使用三种样式表：外部样式表：外部样式表是一个单独的文件，其中包含所有样式。 您可以在网页编码的开头部分链接到它。

<link rel="stylesheet" type="text/css" href="styles/stylesht.css">

如果您有多个样式表，则可以轻松找到所有样式表。 另外，您可以在robot.txt文件中放置一条指令，以指示搜索引擎漫游器不要进入该文件夹，并且不要将其添加到其数据库中。

---

内部样式表：内部样式表已添加到页面的顶部。

<style type="text/css">
Your style types
</style>

内部样式表中的样式仅应用于实际编码到的页面。 您经常看到这种情况。 模板由内部样式表构成，在您重新使用模板时，样式代码将插入到每个页面的头部。 某些Wordpress插件也可以这样做，而不是仅为该插件插入指向外部样式表的链接。

---

内联样式：内联样式应用于HTML元素。

<p style="color: #636954;">My sentence.</p>

这种内联样式将文本的颜色更改为绿色：