内联HTML与外部CSS效率/最佳做法
[英]Inline HTML vs external CSS efficiency/Best practices
问题描述
Working on a webpage for a personal project, and have a question regarding efficiency or current standards regarding styling inline in HTML or using an external CSS file. 
正在处理个人项目的网页，并且对效率或当前标准的HTML内联样式或使用外部CSS文件有疑问。 Basically, I'm going to have a few different pages with a bunch of text blocks that follow this pattern: 基本上，我将要在几个不同的页面上放置一些遵循此模式的文本块：
Underlined line
Bold part: A bunch of numbers in normal font weight
Bold part: A bunch of numbers in normal font weight
etc
Bold part: A bunch of numbers in normal font weight
Each page will repeat that type of text block between 100-500 times on the page. 每个页面将在页面上重复这种类型的文本块100-500次。 I was wondering if it made any difference if I styled each block inline with HTML or if it would be better to use CSS. 我想知道，如果我用HTML内联样式化每个块，或者使用CSS会更好，是否有什么区别？ ie: 即：
<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
vs. 与
<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>
Is either one of these methods more efficient than the other? 这些方法中的任何一种是否比另一种更有效？ I'm sure it won't matter based on the scale of my project, but I'm curious if it'd be better to repeat b and u tags over and over or to use divs and classes instead. 我确定这对我的项目规模无关紧要，但是我很好奇是否最好一遍又一遍地重复b和u标签，或者改用div和classs。 Is either method more commonly accepted out in the world than the other? 一种方法在世界上是否比另一种方法更普遍被接受？ Thanks! 谢谢！
4 个解决方案
解决方案1
0 2017-04-08 17:11:01
I always think inline is best if and only if you are exporting that page as a single unit to some other application, email blast, mobile delivery - or what have you. 我一直认为内联是最好的方法，当且仅当您将该页面作为一个单元导出到其他应用程序，电子邮件快速发送，移动传递-或您拥有什么。
But you're always better off with an external CSS file from where your HTML markup is written. 但是，从编写HTML标记的外部CSS文件中获得最好的收益。 It will keep your HTML clean and manageable. 它将使您的HTML整洁并易于管理。 You can write your browser size restrictions in your CSS file too, so mobile delivery is covered for different types of views. 您也可以在CSS文件中编写浏览器大小限制，因此，移动交付适用于不同类型的视图。
解决方案2
0 已采纳 2017-04-08 17:11:24
External css classes make significant difference in the page load time as compared to inline css. 与嵌入式CSS相比，外部CSS类在页面加载时间上有显着差异。 When a html page is repeatdly loading by the user , external css files will be cached on browser thus loading becomes faster, as in the case of inline styles it need to be load each time 当用户重复加载html页面时，外部css文件将被缓存在浏览器中，因此加载变得更快，因为对于内联样式而言，每次都需要加载
解决方案3
0 2017-04-08 17:16:19
Inline CSS: An inline style loses many of the advantages of style sheets by mixing content with presentation. 内联CSS：内联样式通过将内容与表示混合在一起而失去了样式表的许多优点。 Use this method sparingly! 谨慎使用此方法！ To use inline styles you use the style attribute in the relevant tag. 要使用内联样式，请在相关标签中使用style属性。 The style attribute can contain any CSS property. 样式属性可以包含任何CSS属性。
Internal CSS: An internal style sheet should be used when a single document has a unique style. 内部CSS：当单个文档具有唯一样式时，应使用内部样式表。 External CSS: An external style sheet is ideal when the style is applied to many pages. 外部CSS：将样式应用于多个页面时，外部样式表是理想的选择。 With an external style sheet, you can change the look of an entire Web site by changing one file. 使用外部样式表，您可以通过更改一个文件来更改整个网站的外观。
So, I recommend you for Best Practice Use External CSS. 因此，我建议您使用外部CSS的最佳实践。
解决方案4
0 2017-04-18 19:23:52
External css classes make significant difference in the page load time
Also consider if that is true, you have something else going on with your server - look for load issues or if the file is huge with sample CSS only put in what you actually need. 还请考虑是否正确，服务器是否还有其他问题-查找负载问题，或者文件很大，而示例CSS仅放入您真正需要的文件中。
External CSS should not be adding significant time to your load. 外部CSS不应增加您的负载时间。
I'd look for asyncronous methods to load css and js files. 我会寻找异步方法来加载css和js文件。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.