External CSS in Stack Snippets takes priority over internal CSS

Question 1

Stack Snippets are great, but I keep running into a recurring problem: external CSS is injected directly into the <body> tag and not the <head> but the internal CSS is injected into the <head>. This gives the following HTML structure:

head
 style --> internal
body
 link --> external

The internal style is parsed first, and then the external files are parsed afterwards, meaning the external CSS overrides the internal CSS's declarations.

Example

p {
 font-size: 100px;
}

<link href="http://meta.stackoverflow.com/content/Sites/stackoverflowmeta/all.css?v=15d89b6948a8" rel="stylesheet"/>
<p>Hello, world!</p>

Here I've included Meta's own stylesheet as an external library.

The result should end up looking like this:

Example Image

But instead it looks like this:

Example 2

This is because the external CSS's style overrides the internal style:

Developer Tools Screenshot

Question 2

Isn't including external style sheets somewhat opposed to the concept of the MCVE?

Question 3

@jonrsharpe yes and no. If it's someone's entire stylesheet and their problem is with that, yes. If it's a problem that requires a specific library to demonstrate (e.g. Bootstrap or Font-Awesome), a very minimal example can be created through embedding those as external resources.

Question 4

Fair point! It does make sense for whatever's declared within the snippet itself to take precedence.

Question 5

Is your question similar (or even a dupe?) of my earlier question about similar issues?

Question 6

Increase the specificity.

Question 7

@TravisJ What if it's a question about specificity?

Question 8

@JeremyBanks - Precisely my point.

Question 9

The snippet included in this answer produces the same results as the picture and the answer below, so I'm voting to close.

Question 10

@Laurel looks like it's been fixed. :)

Question 11

@JamesDonnelly the external css you have in the snippet is empty. that's why. Just checked no, it hasn't been fixed.

Question 12

@Laurel, the issue hasn't been fixed but the css that his snippet is linked to has changed. meta.stackoverflow.com/content/stackoverflowmeta/all.css is now a blank file. I just tested it with another file, exact same issue as before.

Question 13

@SML well spotted. I've updated the snippet in this question to point to the new URL at meta.stackoverflow.com/content/Sites/stackoverflowmeta/…. I've voted to Reopen it, but it'll need a few more votes before that happens.

Question 14

I have a hunch this is [status-bydesign] a design limitation of Stack Snippets, and not so much a bug in the traditional sense of the word. Everything in the HTML portion of a Stack Snippet is injected into the body and it is not possible to specify which elements should go in the head instead, and therein lies the problem.

Question 15

Good catch and perfectly legitimate bug report, but unfortunately we have to decline it. Solving this would require DOM manipulation on the snippet's HTML, and this could lead to undesirable side effects. We prefer to stick to the "what you type is what gets run" principle, even if there are small issues like this one. Check out this meta post for an example of why leaving the DOM as expected is important.

I suggest you to follow @SeinopSys's advice and use the @import directive whenever you need to add external stylesheets that conflict with the styles defined manually.

Question 16

You can easily link external style sheets via CSS' @import. As long as you keep all of them on top of the CSS section it should load fine & before any of the CSS you write.

@import url('http://meta.stackoverflow.com/content/stackoverflowmeta/all.css');
p {
 font-size: 100px;
 line-height: 1em;
}

<p>Hello, world!</p>

Question 17

It's not a good pratice to link external css libraries. Worst if you want to re-declare properties that those libraries are giving to you. But if you want to take advantage over externals, just perform a more specific selector and external will not (should not) overwrite your styles.

for example: supposing the following architecture:

<div class="container">
 <p class="par">
 <span class="bold">
 Hello world!
 </span>
 </p>
</div>

external:

span.bold{font-size:100%, font-weight:bold;}

to overwrite it with internal (you can't cause internal loads first, so let's make something that external cannot overwrite): internal:

div.container > p.par > span.bold {font-size: 100px; font-weight: normal;}

The result should be 100px and normal, because the selector is more accurated than external ones.

Question 18

This would be a good answer on the main site, but I think you are missing the point. This is Meta. He's not asking about design practice, or even about CSS. This is a report about a bug in stack snippets. The other answer is showing a workaround for the bug in the site's software. (Click on >css< to get to CSS questions that need answers.)

Question 19

All I would to say is, if the use of external libraries such as the bootstrap framework a bad practice then it is a wide spread bad practice. I shall leave this discussion with this note. P.S. no one is saying there is anything wrong with your method to tackle this. All that was being said is that we hope for a more user friendly snippet.

Question 20

The best pratice is download bootstrap and link it with internal link rel. I know what you want, and respect your oppinion, but it's not the way to do it. You can even llink your external css using a js function which delay the loading x time or on event... lol

Question 21

I believe the use of CDN for external libraries are considered better practice than the use of internal link rel.

Question 22

sorry but i have to ask. Why?

Question 23

Please google reasons to use CDN, your argument isn't with me. I am not even a frontend person.

Question 24

Google will change their reasons everytime they want. Experience says that if a close CDN falls, the loading on your (not google's) website or app will slow down. And what's up if your server fall down? well, if your own server fall i dont thing that css loading matters (css or other resources). Other reason. Security. and the last point, i'm 40%front, 60%back, but if you're not a frontend... why are you being contrary to me all time instead of try what i'm trying to show you?

Question 25

This isn't great advice. CDN's are perfectly legit and overriding a CSS selectors is okay too (just be thorough with larger frameworks). If you have to change 1/10 properties for a selector in a framework, then yes, upping the specificity of a selector would be the right choice to target that one property. If you're changing 9/10 properties for a selector, straight up overriding is fine. If one goes nuts and rewrites half the CSS for a front-end framework then it's time download and serve your own customized version of the framework.

Konamiman StaffModKonamiman 50.4k30 silver badges30 bronze badges · Accepted Answer · 2016-08-05 14:04:20Z

Good catch and perfectly legitimate bug report, but unfortunately we have to decline it. Solving this would require DOM manipulation on the snippet's HTML, and this could lead to undesirable side effects. We prefer to stick to the "what you type is what gets run" principle, even if there are small issues like this one. Check out this meta post for an example of why leaving the DOM as expected is important.

I suggest you to follow @SeinopSys's advice and use the @import directive whenever you need to add external stylesheets that conflict with the styles defined manually.

External CSS in Stack Snippets takes priority over internal CSS

Example

3 Answers 3

You must log in to answer this question.

Linked

Hot Network Questions

Example

3 Answers 3

You must log in to answer this question.

Linked

Related