What are the disadvantages of including CSS file mid-page in 2018?

Question

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:

Start loading global.css, some-image.jpg, specific-component.css (in this order).
After global.css is loaded start rendering page until specific-component.css <link> element.
Finish loading specific-component.css
Render the rest of the page.

Or will it be:

Wait for both global.css and specific-component.css finish loading and only then start rendering the page.
What if there are 20 images before specific-component.css, will browsers prioritize CSS file or not?

"however MDN states that is is allowed" — No. It says that a `` element, if it has an `itemprop` attribute, is allowed. That isn't the same as *a `` element that is `rel=stylesheet`*. — Quentin, May 03 '18 at 08:07
https://stackoverflow.com/questions/1642212/whats-the-difference-if-i-put-css-file-inside-head-or-body may be worth a looksy :) — treyBake, May 03 '18 at 08:07
See also [this question](https://stackoverflow.com/questions/6236097/is-link-not-rel-stylesheet-allowed-to-be-used-in-body): If the `` has an `itemprop` then it can't have a `rel` so you can't load a stylesheet that way. — Quentin, May 03 '18 at 08:08
@ThisGuyHasTwoThumbs sadly, the answers are from 2009, I also recently found https://jakearchibald.com/2016/link-in-body/ with partly answers the question. — Marvin3, May 03 '18 at 08:10
@Quentin - Regardless of what MDN says, link elements of rel="stylesheet" are [allowed in the body by HTML 5.2](https://www.w3.org/TR/html52/document-metadata.html#allowed-in-the-body) — Alohci, May 03 '18 at 09:15

tao · Answer 1 · 2018-05-03T16:15:41.160

There are two major disadvantages:

you lose maintainability of code
if that CSS affects any element before it, you might experience FOUC.

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.

score 2 · Answer 2 · answered May 03 '18 at 11:38

Safari and Edge will render content before the <link>, then continue rendering once the linked CSS has fetched.

Firefox will render content before and after the <link>, then update the page once the linked CSS has fetched. You can make it behave more like Safari/Edge using <link … ><script> </script> (the space between the script tags is necessary.

Chrome will block rendering as soon as it discovers the <link>, meaning it may also block content before the link element. The plan is to align with Safari & Edge https://bugs.chromium.org/p/chromium/issues/detail?id=481122.

If you find that your CSS is fetching too late, you can use <link rel="preload" as="style" href="…"> to load it sooner.

score 1 · Answer 3 · answered May 03 '18 at 08:27

If you give img{width:100px;} in global.css And img{width:150px;} in specific-component.css, In this case work specific-component.css because he render after global.css and it overwrite of global.css.

If you give img{width:100px !important;} in global.css And img{width:150px;} in specific-component.css, In this case work global.css because we set img width important in global.css and it don't overwrite by specific-component.css.

And If you give important in both, then work specific-component.css. And css engine always compile first specific-component.css.(look in inspect element)

score 0 · Answer 4 · answered May 03 '18 at 08:17

In my opinion this depends on how you work. If you load a complete page (whether it's manual HTML, or generated through CMS like Wordpress) - it is recommended that the style will load before the body, to allow the rendering to be smoother and faster.

HOWEVER, since the use of component libraries like React and Vue (for example) is becoming more and more popular, it's acceptable to connect the CSS to the component, and not load component-sepcific CSS with the general style (this should generally allow faster loading time, especially in one page sites that have dnamically changing elements.

As per rendering order, by default, CSS/JS is the highest priority to load, and after that you get media elements (images, videos, audio etc.). Check this link or this to read more about priorities in the browser.

What are the disadvantages of including CSS file mid-page in 2018?

4 Answers4