7

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.

3
  • 1
    Once you hit the Save and Insert button, there should be an "edit this snippet" link below the snippet in the post preview, below the Run Code Snippet button. Commented Jun 20, 2016 at 14:27
  • @MikeMcCaughan Found it, thanks =)
    – SML
    Commented Jun 20, 2016 at 14:41
  • 1
    As the person who asked the previous question you've linked to, I haven't accepted the answer it received as it's nothing more than a temporary workaround. It would be nice for this issue to get resolved. Commented Jun 21, 2016 at 7:45

2 Answers 2

-3

div.container > p.par {font-size:1em; font-weight:lighter;}
<link href="http://pas.imaginais.net/test.css" rel="stylesheet"/>
<!-- the external ones contains: p{font-size: 100%; font-weight:bold;} -->
<div class="container">
  <p class="par">
    Hello world
  </p> 
</div>

SML if you need more explanation, please add me on hangouts or something it's not funny to argue more on there absurdly

5
  • Dude, chill. I have no idea why you got all worked up. I have no problem understanding your method, nor have I or anyone said there is anything wrong with your method. I have repeated this point three times already, I don't know how much more clear I can be. Let's see the post this way, the subject in concern is the design of the snippet, it is a topic of UX, please let the consensus of the majority speaks. =)
    – SML
    Commented Jun 21, 2016 at 10:59
  • im not saying that youre wrong, i'm trying to make you understand that there's a way to make it with basic knowledge of how it works. So i tried to explain you, posted and example and we can argue for years, but, at least since css1 from now, the correct way to deal with loads and overrides is that... what more i have to do? it's a closed branch, you cannot re-invent the wheel...
    – JoelBonetR
    Commented Jun 21, 2016 at 11:06
  • Okay, let me repeat what I've said in my very first comment to you, I appreciate the time you have taken to answer this question and the detailed explanation you have given about overrides.
    – SML
    Commented Jun 21, 2016 at 11:14
  • ok, let's resume. You have no idea 'bout how deal with stack snippets. i tell you how to do it. you keep answering because it works but is not what you expect. Why my example is not upvoted to let the visitors know the answer fast and easy?
    – JoelBonetR
    Commented Jun 21, 2016 at 11:21
  • .................Joel, please take your argument to the 34 up voters to the post meta.stackoverflow.com/questions/302501
    – SML
    Commented Jun 21, 2016 at 11:24
-4

CSS are read and charged by order defined from top to bottom. If you have first .css with

.bold{font-weight:bolder;}

and a second one with

.bold{font-weight:bold;}

the final result will be bold because the font-weight property is overrided.

if the second is

.bold{font-size: large;}

the final result will be bolder and size large because there are no override.

Anyway, !important sentence is not made to override all as you want, (check doc about !important) and must be used only if necessary hundred percent. The best way to override is making a better and accurate selector.

Example:

ul.list >li.itemlist > span.bold {/*css styles*/}

will not be overwrited by:

.bold{/*css styles*/}

And it's possible that

.bold{/css styles/ !important}

cannot overwrite it too. if you want to overwrite it, must do something like:

section.first > div.container > ul.list >li.itemlist > span.bold {/*css styles*/}
9
  • You misunderstood the problem here, we are referring to how external css takes priority over internal css in the snippet. The internal css always get renders first, making none of the overrides to the external CSS through the internal CSS work, this is to do with the design of the snippet. There is a manual way to work around which is in the linked question to this post, but it would make better sense to change how the snippet parses the url of the external css.
    – SML
    Commented Jun 21, 2016 at 9:00
  • I appreciate that you have taken the time to answer the question but the answer you provided is irrelevant to the question as this is a feature request.
    – SML
    Commented Jun 21, 2016 at 9:00
  • no matter which css is loaded first or second, if you define more accurate css selector, it will take priority over others. Even if external or internal css are loaded first or last, the final result is the blend of all css. I use this to edit css styles on WP templates for example, where internal and external stylesheets are loaded, just select accurately and it'll smash the generically one. And, to ensure CSS files are downloaded in parallel, always include external CSS before external JavaScript. Cheers.
    – JoelBonetR
    Commented Jun 21, 2016 at 10:02
  • meta.stackoverflow.com/questions/302501/… just posted the same on there, try it yourself and tell us your result. I'm explainig you the way css works, if you want to learn and understand it. if you only want to get a result once and forget it tell someone that do it for you.
    – JoelBonetR
    Commented Jun 21, 2016 at 10:15
  • By the way, the main point here is not whether a manual workaround is available. The main point here is if the snippet can be redesigned to make it more user friendly and allow people to add code and expect the same code to work just like it would, if the external CSS is added in the <head> section of the HTML
    – SML
    Commented Jun 21, 2016 at 10:17
  • i repeat umpteenth, try to perform the most accurated css selector wherever you can edit css, then try it. it doesn't matter where you link your css (but try not to import on other css, it will load slowest), if you can, link the css you can edit last following this order: external css external js internal css internal js then tell us your results with screenshots or something.
    – JoelBonetR
    Commented Jun 21, 2016 at 10:22
  • 1
    Joel, with all due respect, I really think you have missed the point of this post. No one is saying there is no manual workaround available, what I am saying is, those manual workaround is totally unnecessary if a simple change can be made to the design of the snippet. We are talking about UX here. If you still don't see it, then please let's just agree to disagree. Thx.
    – SML
    Commented Jun 21, 2016 at 10:29
  • please, check the url of other post, there i pasted screenshot and snippet and the correct way to do it. You want that external css are loaded last, and it isnt the correct way. wherever you need to deal with this in real world, you will need to do it correctly, not dirty because "it's the easy way". With all due respect. It's working to me, why not for you? To improve my answer i'll repeat the example for you, right here, right now.
    – JoelBonetR
    Commented Jun 21, 2016 at 10:38
  • just so you know, it wasn't my down vote.
    – SML
    Commented Jun 21, 2016 at 10:59

Not the answer you're looking for? Browse other questions tagged .