Inline HTML vs external CSS efficiency/Best practices
Question
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. 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. 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. 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. Is either method more commonly accepted out in the world than the other? Thanks!
4 answers
solution1
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. It will keep your HTML clean and manageable. You can write your browser size restrictions in your CSS file too, so mobile delivery is covered for different types of views.
solution2
0 ACCPTED 2017-04-08 17:11:24
External css classes make significant difference in the page load time as compared to inline 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
solution3
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. Use this method sparingly! To use inline styles you use the style attribute in the relevant tag. The style attribute can contain any CSS property.
Internal CSS: An internal style sheet should be used when a single document has a unique style. External CSS: An external style sheet is ideal when the style is applied to many pages. 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.
solution4
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.
External CSS should not be adding significant time to your load.
I'd look for asyncronous methods to load css and js files.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.