Issues with loading and unloading CSS and Javascript files when performing page navigation in Windows Store apps

If you are a web developer, the way navigation works in Windows Store apps might look familiar to you, but unless you have some experience developing mobile apps, it probably isn't something you’ve encountered before. This especially applies to those developers whose background lies in developing multi-page web sites and applications.

But the way Windows Store apps are structured (or at least, the way they should be) is in the form of single-page application and their navigation model is tailored for this type of page structure. So, how does it work?

It is simple actually, whenever you navigate to a page, that page's respective html, css and javascript files will get loaded. As you move away from the page, its html is cleared from the DOM, but the css and javascript files remain loaded. Why is that?

The reason for that is to preserve the global namespace and context, by loading the necessary css and js files only once, so there is no room for all kinds of bugs and frustrations that might come as a result of inconsistency of global context.

But how do I know which files are getting higher priority over the other files?

Once again, the answer is simple. The last file to get loaded by the rendering engine has the highest priority and can potentially override older files. And this is something that can produce whole lot of bugs and issues, so here are couple of advices on how to prevent that from happening and how to solve it.

When it comes to Javascript, you’ve probably heard this before. Global namespace is evil and you should always write your namespaces and modules, so you could organize your code and avoid pollution of global namespace. The importance of this is explained extensively and I am not going to explain it here. But you really should do it, since it can lead to unimaginable frustrations.

But when we speak about css, things can get quite messy. As I said, as you navigate from page to page, css files are getting loaded and will stay loaded, even if you navigate away from the page. And this can get troublesome. Imagine this scenario:

You have page A that can navigate to Page B. When you start your app, your page A is loaded, with its pageA.html, pageA.css and pageA.js files. Then you navigate to page B, and pageB.html, pageB.css and pageB.js files will also get loaded. Now you move back to the page A and you expect that page B files got unloaded. But they didn’t just remain loaded, they also have higher priority over pageA.css and pageA.js files. What this means is that, in case you have conflicting css clauses in the respective css files, css clauses from page B will override css from Page A and mess up the appearance of page A completely.

So, how do we go around this?

There are couple of solutions. You might dynamically load and unload css files with javascript (by including and excluding script tags), but that paves a way for additional bugs and it isn’t a way I would recommend. What you should do is to write all the general css in the main file (default.css or whatever is the container for the other pages). But when there is a need for you to write page specific css, you should write it in that page’s respective css file and make sure that css applies only to that page. One of the ways this can be done is to use additional css selector, which is unique to that page and put it in front of every page specific css that you write. Something like this:
pageB button { display:block; }

That element with pageB class can be a simpl div>, that would act as the main wrapper over your page’s html code.

This is handy because, in case we wrote that css statement without the class selector, it would apply to all the buttons in your app and could wreak a havoc on your layout. This way, it applies only on Page B and won’t affect the buttons in page A, even if you do the navigation to Page B and return to A.

It is not the toughest concept out there to grasp, but it can lead to some serious problems and frustrations. So, when you write a Windows Store app using HTML and Javascript, make sure that you do not write conflicting code. When you mess it up with css, you’ll easily notice, because your page’s appearance will get wrecked. But if you write conflicting javascript code, then may the mercy be on your soul.