Skip to main content
Legend
April 3, 2019
Question

Css stylesheet links - where - opinions?

  • April 3, 2019
  • 3 replies
  • 1797 views

I have been 'gifted' a widget which I need to include on a website I'm updating. It's a javascript link to an external resource which writes a link to a css stylesheet into the website to give position/presentation to the widget.

The link to the stylesheet is written at the foot of the page in a div containing other code relating to the widget. Is it now considered ok for a stylesheet link to be written anywhere within the html code these days?

I ask because I want to include my own css linked stylesheet to over-ride some stuff I don't much like about the widget. I was just going to include the over-ride css in in the global css file BUT if I can just start including css stylesheet file links all over the shop, should I bother?

Any opinons on this practice? I was under the impression that it was still best practice to link the stylesheets in the <head></head> of the page but maybe things have moved on and I've miss that information. Its difficult to keep up what is going on these days!

Cheers

Os

This topic has been closed for replies.

3 replies

pziecina
Legend
April 11, 2019

prerank28948274

Hi Preran,

I notice that you have marked Nancys answer as correct, surerly marking an answer correct in this case is for Osgood to decide?

Add to that my reply #9, is noting that Nancys answer has nothing to do with css parsing and rendering. Loading css by including links in each section, has NO benefit to the end user, as ALL css must be parsed before rendering can take place, (browsers are bumb, they have no idea if a css file is all that is required to render that section.).

Update. Bens idea about having a discussion about http2 may be helpfull to users, as there appears to be a misunderstanding about how http2 can improve file loading vs the actual rendering of a page.

osgood_Author
Legend
April 11, 2019

There's no correct answer here in my opinion, helpful ones, yes. That's why I didn't mark anything as singularly correct.

pziecina
Legend
April 3, 2019

The only things you have to think about are the cascade and rendering.

Most browsers upto ie11 (have not checked since) simply appended  the style sheets to the css style rendering process as they are loaded. So a style sheet loaded at the bottom of the page, would be appended to the bottom of the list of previously loaded style sheets. Meening that anything in those styles would have a higher priority, (so overide previous styles), unless you use 'important' for the earlier css properties, (thats saying important is not used by the later properties).

Also you have the question of rendering of css, as that begins before javascript has finished loading. Which may then force the browser to re-render the page if css is applied via js.

osgood_Author
Legend
April 4, 2019

As I have no control over where the default widget css stylesheet is loaded I may as well add my own over-ride widget stylesheet in the same location. I'll give it a go and see if it has any detrimental effect on page loading. Tests at the moment suggest it doesnt.

ALsp
Legend
April 3, 2019

You'll like get differing opinions, but I've always like to group CSS links in the head. Makes it easier to control and work with the cascade.

osgood_Author
Legend
April 3, 2019

ALsp  wrote

You'll like get differing opinions, but I've always like to group CSS links in the head. Makes it easier to control and work with the cascade.

Al I'm sure I will. Only contemplating doing it, if its acceptable, as it's an external widget and I've only changed up  a couple of the default selectors. The link can go in the widget include file.

I'm Googling for some confirmation - from the information I've pulled up it appears that a link is ok but a <style> tag block isn't.

Nancy OShea
Community Expert
Community Expert
April 3, 2019

HTTP/2 allows for progressive loading of CSS scripts.  The idea here is to defer loading non-essential scripts until they are actually needed  by the web app or document.  Also you need SSL./TLS server for this to work.

The Future of Loading CSS

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>

  <!-- HTTP/2 push this resource, or inline it, whichever's faster -->

  <link rel="stylesheet" href="/site-header.css">

  <header></header>

  <link rel="stylesheet" href="/article.css">

  <main></main>

  <link rel="stylesheet" href="/comment.css">

  <section class="comments"></section>

  <link rel="stylesheet" href="/about-me.css">

  <section class="about-me"></section>

  <link rel="stylesheet" href="/site-footer.css">

  <footer></footer>

</body>

</html>

Nancy O'Shea— Product User & Community Expert