内联 HTML 与外部 CSS 效率/最佳实践答案

【问题标题】：Inline HTML vs external CSS efficiency/Best practices内联 HTML 与外部 CSS 效率/最佳实践
【发布时间】：2017-04-19 03:23:52
【问题描述】：

在个人项目的网页上工作，并且对 HTML 中的内联样式或使用外部 CSS 文件的效率或当前标准有疑问。基本上，我将有几个不同的页面，其中包含一堆遵循这种模式的文本块：

下划线

粗体部分：一串正常字体粗细的数字

粗体部分：一串正常字体粗细的数字

等

粗体部分：一串正常字体粗细的数字

每个页面都会在页面上重复该类型的文本块 100-500 次。我想知道如果我用 HTML 为每个块设置样式，或者使用 CSS 是否会更好，是否有什么不同。即：

<u>Underline</u>
<b>Bold:</b> 1, 2, 3, 4, 5, 6, 7, 8, 9, 10
<b>Bold:</b> 1, 2, 3, 4, 5, 6, 7, 8, 9, 10
etc

对比

<style><!-- I'd use an external CSS file, but putting this in style tags to show what I'm thinking -->
     div .underline { font-decoration: underline; 
                      display: inline; }
     div .bold { font-weight: bold;
                 display: inline; }
</style>
<body>
     <div class="underline">Underline</u>
     <div class="bold">Bold:</b> 1, 2, 3, 4, 5, 6, 7, 8, 9, 10
     <div class="bold">Bold:</b> 1, 2, 3, 4, 5, 6, 7, 8, 9, 10
     etc
</body>

这些方法中的任何一种是否比另一种更有效？我敢肯定，根据我的项目规模，这并不重要，但我很好奇，一遍又一遍地重复 b 和 u 标签还是使用 div 和 classes 会更好。这两种方法在世界上是否比另一种更普遍接受？谢谢！

【问题讨论】：

从长远来看，使用外部 CSS 文档会更好。尤其是随着项目规模越来越大。

标签： html css

【解决方案1】：

与内联 css 相比，外部 css 类在页面加载时间上有显着差异。当用户重复加载一个html页面时，外部的css文件会被缓存在浏览器上，因此加载速度会更快，因为内联样式每次都需要加载

【讨论】：

【解决方案2】：

我一直认为内联是最好的，当且仅当您将该页面作为一个单元导出到其他应用程序、电子邮件群发、移动交付或其他应用程序时。

但您总是最好使用编写 HTML 标记的外部 CSS 文件。它将保持您的 HTML 干净且易于管理。您也可以在 CSS 文件中编写浏览器大小限制，以便针对不同类型的视图涵盖移动交付。

【讨论】：

感谢您的回复。我通常同意使用外部样式表保持 HTML 清洁这一点，但在这种情况下，仍然需要声明许多不同的 div 和类，以便仅将大多数行的第一部分加粗- 这就是为什么我不确定最好的路线是什么

【解决方案3】：

内联 CSS：内联样式由于将内容与表示混合在一起而失去了样式表的许多优点。谨慎使用此方法！要使用内联样式，您可以使用相关标签中的样式属性。 style 属性可以包含任何 CSS 属性。

内部 CSS：当单个文档具有独特的样式时，应使用内部样式表。外部 CSS：当样式应用于许多页面时，外部样式表是理想的。使用外部样式表，您可以通过更改一个文件来更改整个网站的外观。

所以，我推荐您使用外部 CSS 的最佳实践。

【讨论】：

【解决方案4】：

外部 css 类对页面加载时间有显着影响

还要考虑这是否属实，您的服务器还有其他问题 - 查找负载问题或文件是否很大，示例 CSS 仅放入您实际需要的内容。

外部 CSS 不应为您的负载增加大量时间。

我会寻找异步方法来加载 css 和 js 文件。

【讨论】：