Menu
There is very old thread where people state that you should never include CSS in body, however MDN states that is is allowed. So is it considered good or bad practice to include CSS in the middle of the page?
For example, let's take a structure like this:
<html>
<head>
<link href="global.css" rel="stylesheet">
</head>
<body>
<h1>Some title</h1>
<p>Some content</p>
<img src="some-image.jpg" />
<link href="specific-component.css" rel="stylesheet">
<div>
Specific component that requires the style
</div>
<p>Other content</p>
</body>
</html>
What are disadvantages of including specific-component-style.css mid page comparing to including it to head section?
How page will be rendered with it? Will it be:
<link> element.Or will it be:
480
There are two major disadvantages:
Theoretically, there's also a minor performance loss, but it's negligible: rendering is paused when a new stylesheet resource is met. A clear difference should be made between "render blocking" and script execution or DOM building blocking. The browser will continue to do whatever else it can and will block any script requesting repaint(), until the resource resolves, at which point, CSSOM is rebuilt, all existing DOM elements are checked against the new CSSOM and all pause scripts are continued.
If your <style> refers to an exception only met in that particular view/component/page, it makes sense to add it there, before the element affected by the rules. But if you make a habbit out of it, sooner or later you'll wish you had all your styles in one place; your project will become harder to maintain.
On general principles, you should not do it.
It also greatly depends on the scale of your project. On small projects it's irrelevant. In huge projects, involving large teams, it's completely forbidden, as nobody will remember your exception. So it's sometimes valid ground for losing your position or at least your standing. ツ
Last, but not least, especially if you're not regarded as an expert, it's something that can be interpreted against your interest by people assessing your work (as in, people knowing less than you might see it as a sign of you not doing your job properly).
With that being said, the browser doesn't care. If it validates, it's applied and rendered.
Another minor technical issue (in the case of <style> tags, not <link>s) is that inline CSS is never cached. It gets loaded each time, together with the markup, while regular CSS in loaded stylesheets does not eat up bandwidth anymore. But, again, if we're talking a few lines of code, it's irrelevant.
99
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
