Dynamically generated css

Question

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:

• less - but still requires to load a separate stylesheet
• DiceJS (apparently a new library)

Answer 1

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.

Answer 2

Less is absolutely awesome, I don't think you should try to generate css with a custom library in javascript. It's a good idea to keep your javascript as separate as possible from your css.

We use certain element class="" attributes to trigger javascript logic, but they never overlap with classes used in our less styles. (we use different casing rules for both to prevent overlap from happening).

There's also not that much benefit to dynamically load parts of your css. We have the less.js javascript running during development, but we run the 'lessc' compiler for production so we always have 1 stylesheet (and also compressing it with YUI Compressor).

Unless the total css is absolutely humongous, we prefer to load in 1 big css file at the first hit, and afterwards have the file cached.

Making sure all your css is loaded at all times (and not just parts) also helps you enforce that there are no conflicting rules. This will really benefit you if you ever must to refactoring and parts of your application move to other urls (where all of a sudden overlap becomes visible).

So I'd suggest, rather than trying to solve your issue by dynamically generating the styles you need, you may just need better organization for your css.

If you're looking for a great example of effective use of less, check out Twitter Bootstrap

Answer 3

Using JavaScript for CSS sounds a bit messy, in my opinion. As you mention your self, I would instead recommend you to use LESS or SASS or similar. Yes, it would cause one extra resource to be loaded, but I think that is well worth it compared to using JavaScript for styling. In my opinion, it is the wrong tool for the purpose.