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?
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.
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?
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.