Should I use a CSS reset or normalize on Phonegap / Cordova apps?

Question

I am wondering if its a good idea (if I want consistency across a multiplatform build) to include a css reset, or perhaps a css normalize library?

My concerns are of course, application speed, load time and memory usage, and the goal is of course UI consistency across platforms...

Answer 1

Overview

CSS reset is a must, Cordova / Phonegap all use the phones native browser so Windows Phone this is an Internet Explorer wrapper, android it's now a Chrome wrapper (old version use their own browsers wrapper), iOS uses what ever version of safari mobile for that version of iOS all of witch have more support for HTML5 so there could be differences. this means you need to reset so you have a base that is the same for all devices / browser the same as a Desktop website. but performance entirely relies on what your doing if you just use a small basic reset it will be less but then even a big one it's would you notice it anymore then not having it.

CSS Reset

So we know browsers have slight differences in CSS Engines Default Font's and stuff so we use a reset to prevent that this is the same for Mobile browsers (thats what cordova/phonegap use) so a reset is always recommended however, even if your building a cordova/phonegap mobile application for both iOS and Android is a royal pain in the arse Android support loads of Device Sizes iOS only has a few. but these sizes can cause massive problems not to mention the DDPI you have to use as the DPI varies so much.

Performance

There is a slight performance drop, not that you would see under any messurement it unless you include a massive CSS Reset system like http://getbootstrap.com/css/ that would add a bit of a performance hit but would you notice it if its 0.5 seconds your javascript takes longer from phonegap to init(), however look at bootstrap first if there is stuff in there that you would be using it would be worth it just to save development times i'm constantly using the alerts from http://getbootstrap.com/components/. there are small ones like http://html5doctor.com/html-5-reset-stylesheet/ if thats all your wanting.

Sources The Internet it's full of tutorials telling you to implement a reset! https://www.google.co.uk/search?q=Phonegap+use+CSS+Reset&oq=Phonegap+use+CSS+Reset&aqs=chrome..69i57j69i60l3.3494j0j7&sourceid=chrome&es_sm=0&ie=UTF-8

You want facts ok stop using Phonegap/Cordova most of what it does is implements or utilizes HTML5! HTML5 is a work in progress so should not be used! http://www.w3.org/TR/html5/

ME: 5 Years of Mobile Development including developing parts of the Windows Phone 7 Phonegap. while being a developer for one of the Platform Preview applications. so i was building parts of phonegap for WP7 before most users new that WP7 was coming out.

Answer 2

Absolutely. If you're developing the app for multiple platforms then it sounds like a great idea. Though I have no doubt you'll still encounter differences across platforms.

I can't see how it would affect application speed/load times/memory usage.

Answer 3

While developing the app for cross platforms there are lots of issue regarding the css . It will be better to reset the css . But there are still issues regarding the performance .

This article might be helpful to you http://www.informit.com/articles/article.aspx?p=1915792&seqNum=6

Answer 4

Yes, you should!!

I've developed cross platform apps.

and each time I've used CSS reset.

Answer 5

I'm not sure about the exact context of a Phonegap app as I've never actually worked on one, but generally from a performance point of view any CSS reset shouldn't have an impact at all.

However, my opinion is that more often than not you shouldn't even bother with a full-fledged CSS reset targeting a bunch of specific elements and properties - you often end up overwriting them further down the stylesheet anyway.

A simple universal selector margin/padding reset is all I use today, which I supplement with my favourite box model tweak.

* {
    margin:0;
    padding:0;
    box-sizing:border-box;
}

Maybe 10 years ago someone would tell you that the universal selector is slow, and it could've been true then, but using it on its own has been proven to be absolutely harmless today.

The rendering/layout engines of pretty much every recent browser are so quick anyway, not to mention the fact that even low end mobile devices nowadays are equipped with multi-core CPUs.

I wouldn't even call it micro optimisation, that's how negligent the impact is.

Now if you were to use div.header * - that's much more expensive, but probably still not something to lose sleep over if you don't have a few thousand elements on the page.

Have a read and test it for yourself.