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-fold-css-with-paul-kinlan-video/

Answer 3

除了Franz的回答，结构，逻辑和显示代码的分离是最佳实践。它是MVC背后的驱动力 - 它使代码更易于维护。

Answer 4

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

<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>

此内联样式将文本颜色更改为绿色：

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

4 个答案: