Maintainable way to concatenate strings in JS and vendor prefixes I am writing a jQuery plugin which, among other things, inserts a stylesheet in the head. Additionally, I also require vendor prefixes. A lot of values are derived from variables in the script, and I'm unsure how I can write this in a maintainable manner. Now I just list everything, but maybe there's a better way for vendor prefixing and overall structure of this script?

var bubble_in_ms = to_ms(args.bubble_in),
    opacity_out_ms = to_ms(args.opacity_out),
    text_in_ms = to_ms(args.text_in),
    bubble_color_rgb = rgbGenerator(args.bubble_color),
    bubble_css = "";

bubble_css += ".bubble {-webkit-animation: ";
bubble_css += "bubble-effect-in " + bubble_in_ms + "ms forwards,";
bubble_css += "bubble-effect-out " + opacity_out_ms + "ms ";
bubble_css += bubble_in_ms + "ms forwards;";
bubble_css += "animation: ";
bubble_css += "bubble-effect-in " + bubble_in_ms + "ms forwards,";
bubble_css += "bubble-effect-out " + opacity_out_ms + "ms ";
bubble_css += bubble_in_ms + "ms forwards;";
bubble_css += "background: ";
bubble_css += "rgba(" + bubble_color_rgb.r + "," + bubble_color_rgb.g + "," + bubble_color_rgb.b + ",";
bubble_css += args.bubble_opacity + ")";
bubble_css += "}";
bubble_css += ".bubble-wrap:after {-webkit-transition: ";
bubble_css += "opacity " + text_in_ms + "ms;";
bubble_css += "transition: ";
bubble_css += "opacity " + text_in_ms + "ms;";
bubble_css += "}";
Changing the many bubble_css += lines to a single long concatenation spanning multiple lines would be an improvement.

Even more improvement would be using a template framework,
for example moustache.

If you don't want to depend on a framework,
you could cook up something simple.
For example, use a single string with markups like {{ bubble_in_ms }},
and create a utility function that takes the template string and a dictionary of key-value pairs to replace in the template.