I am considering replacing a number of static css files with style tags dynamically generated from JavaScript. My purpose is not to build a stylesheet for the whole document, but rather to use it for plugins that get added to the page, like tabs, slideshows, etc. The stylesheets I currently deal with have 10 to 20 lines.
I see several benefits:
- load only a js file instead of both js and css
- ability to define theming on the fly (e.g. enter colors as variables)
- ability to define selectors on the fly (e.g. namespaced class names)
- add browser specific styles
What would be the drawbacks of this approach? Could you recommend any good references on this topic?
I did some research and found the following tools:
Another benefit would be that each additional asset that is loaded in the page slows down the overall page load because a browser is typically only loading 4 assets simultaneously at a given time.
However, doing all of that combining on page load is likely to cause the page to slow down just as much from the processing alone… depending on how many things it needs to iterate through to make up the final css block.
In terms of performance, it seems very unlikely to me that javascript is going to elegantly / efficiently replace the styles that would’ve been included in a combined css file.
The other thing is that in production environments, you also can do another option which is to use a library to pre-generate a set of minified, optimized, (and obfuscated in the case of JS) code and then have 1 js file and 1 css file loaded at the time of page load, which in-turn you’d cache for speed/loading benefits. Boilerplate lib has a script for this i think.
End of the day: energy is neither created nor destroyed — your optimizations in one place and hurt you elsewhere if you’re not careful.