8

In Stack Snippets, when you're running them, the running frame is constructed with the components in this order:

  1. CSS
  2. HTML
  3. JavaScript

This is good, in keeping with what many believe to be best practices[1][2] (scroll up slightly after following) and avoids a whole class of issues related to the script being before the HTML. But they're displayed in the question/answer in an entirely different order:

  1. JavaScript
  2. CSS
  3. HTML

That's misleading, they should be displayed in the order they're included in the running page (CSS, HTML, then script).

Example:

document.getElementById("target").style.color = "green";
#target {
    border: 1px solid #888;
}
<div id="target">This is the target</div>

Surprisingly, even if you manually edit them to fix the order, they still get displayed in the wrong order. Here's the snippet above which, if you look at the markdown source of this question, is in CSS-HTML-script order, but note how it's displayed:

document.getElementById("target").style.color = "green";
#target {
    border: 1px solid #888;
}
<div id="target">This is the target</div>


Note: This request is specifically about order, for when those three things are all being shown. I strongly support the various suggestions for making it possible to show only the relevant part of a snippet and/or call out the relevant part (such as here and here). So we don't need order to provide emphasis; that's a separate issue.

2

I agree with the suggestion to change the default order - but not according to how they are executed behind the scenes, but in the order they are relevant to the question - which the OP should decide.

Often, the question will be related to one particular language, but setting up a demo will require all 3 (HTML, CSS, JavaScript) of them.

For example a CSS related question might be using a good amount of JS - The answer will be specific to CSS, Still the boilerplate JS is shown at the top of the post.

This could be solved by an option to hide the less relevant parts of the code, as requested here

That option is currently unavailable - Even if it is, for an answer related to CSS which still includes a bit of JS, The OP doesn't have any option to Display the CSS initially, which is most important.

It'd be great if the system respects the order in which the OP re-arranges the snippet segments, like you did.


Having the ability to callout parts of snippet which you mentioned would be great.

  • The main thing is the order should be consistent between display and what it does in the iframe. Separately, I think it's important that that order reflects best practices (as it currently does in the iframe, but not the display). For dealing with the issue of relevance, we should do this and/or this. – T.J. Crowder Oct 2 '14 at 15:21
  • If we implement this, then the order will not be what happens behind the seen, instead what the OP chooses. I see no reason to force the visual representation to reflect what happens in the <iframe>. And for the best practice: i'd go with this, The document first, then the styles, then the script which manipulates it. – Tilwin Joy Oct 2 '14 at 15:28
  • We'll have to disagree on both points. :-) Having them displayed in an order different to the order they're in the iframe is flatly misleading. Doesn't matter much for CSS and HTML; matters a lot for JavaScript. In terms of best practices, the best practices order (CSS, HTML, JS) is very well-established with solid reasons for it (see the links in the question). – T.J. Crowder Oct 2 '14 at 15:33
  • I completely agree with focussing the display on the topic of the question, which is why I linked above to suggestions on that front. And there I think we have good common ground. – T.J. Crowder Oct 2 '14 at 15:34
  • Why i posted an answer is because i'd like to see the later implemented, which is focussing the display on the topic of the question... :) – Tilwin Joy Oct 2 '14 at 15:46

You must log in to answer this question.

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