Topic
External CSS takes priority over internal CSS in snippet.
I first noticed this issue, when I copied and pasted the code I had on jsfiddle into the stack snippet but ended up with different result.
I put this as one of the issues raised in another post and someone has kindly pointed out that this issue has already been answered on External CSS in Stack Snippets takes priority over internal CSS, so I am here to make a feature suggest or rather a suggestion of change to a feature.
In my humble opinon, this post is not a duplicate of the other post, as the other post was intended as a bug report (see tag used). While valid methods to manually workaround the issue have been suggested, but a year has passed since it was first posted and yet no permanent solution has been implemented.
The OP of the other post commented here earlier and said that he hasn't accepted the answers given because he too, would like to see a permanent solution.
Actually from what I gathered, this very issue has been reported in the meta for at least 3 times already.
This post is a feature suggest prompting for a simple redesign of the snippet to permanently resolve the issue.
Not all would see the change as necessary and this is precisely the point of this post, which is to get a consensus of what the majority of users prefer.
Proposed change
When one clicks on the "add an external library" button to add the URL of an external script or stylesheet; if the extension .css is detected, I would like it to be parsed as
@import url('');
and be added to the CSS section of the snippet, instead of its current implementation, where the external css is added as <link href="" rel="stylesheet"/>
in the <body>
section of the HTML.
Such change would allow the code to be rendered in the same order as other popular sandboxes (jsfiddle, codepen etc) and as well as most real life cases, where <link href="" rel="stylesheet"/>
is put in the <head>
section of the HTML, resulting in external CSS being parsed before the internal CSS.