We’re currently developing a complex jquerymobile design. We initially setup our mandatory custom design theme from the Jquerymobile themeroller (http://jquerymobile.com/themeroller/). Even though Jquerymobile themeroller designed our custom mobile theme template we need to customize it more.
Therefore, should we create a another separate css file for my requirement and to override/add the required style ?
In this option I figured in most cases we need defined "!important" into each css styles. Because currently following css files are reading
1) Jquery css file .
2) Jquery themeroller gernerated css file.
3) Custom override css file.
OR
Can we edit the Jquerymobile themeroller generated css file and update it to our requirement ? and Is it recommended update the Jquerymobile themeroller generated css file I mean will it bring any bottlenecks ?
Can anyone please recommend which option should I choose ?
As you’re developing for mobile performance should be high on your list of priorities. Therefore it makes sense to restrict the number of stylesheets the browser has to request (each HTTP request adds to the time it takes to render the page). In which case it makes sense to work with the CSS file you’ve got. Either edit the existing rules generated by the theme roller or add overrides at the bottom of the file.