Thanks for this post! In response to Patrick , we are using this function to set defined styles, but the color and background-color are determined by a form input stored in a database. For example, we have a field named sub_unit, and the user determines the name of the sub-unit, which becomes a class. When the form is filled out, font color and background color are chosen by the person filling out the form and applied to the newly defined class.

Since we have no control over what the sub-unit name is, this snippet allows us to dynamically set CSS when the form data is read.

I like what Patrick has to say, and I like what Chris has to say as well. I think a good compromise for the article would be to mention both patterns and use cases with examples for future readers who may or may not be experienced with CSS.

See the link for the working example:

CSS injection really seems to be the way to go.

I wrote veinjs just for this purpose:
https://github.com/israelidanny/veinjs

injectStyles: function(id, rule) {
    var $div = "<div id='"+ id +"'><style>"+ rule + "</style></div>";

    if ($('body ' + id).length === 0) {
        $($div).appendTo('body');
    }
}

document.styleSheets[0].insertRule(“body {background:red;}”, 0);
document.styleSheets[0].deleteRule(0)

The 0 is the position index. I actually have a class scribbled up for this stuff that does things like detect and map standards CSS to vendor prefixed , produces re-usable CSS for CSS3D stuff like carousels , cubes , pyramids (with textures),manipulates keyframe rules etc. It will even tell me all the classes that effect an element , elements or even elements matching a regular expression query. The only reason this other stuff is mentioned is simply to point out just how much can actually be done working at the rule level

pre[data-foo="css"] {
    content: "</style>"
}

Also, you might want to keep the dom cleaner by using this:

function injectStyles(rule) {
  // Works in IE6
  var div = document.createElement('div');
  div.innerHTML = '&shy;<style>' + rule + '</style>';
  document.body.appendChild(div.childNodes[1]);
}

or:

function injectStyles(rule) {
  // Works in IE6
  var div = $("<div />", {
    html: '&shy;<style>' + rule + '</style>'
  }).children().appendTo("body");    
}

Yeah it is, but there’s never been a browser where it didn’t work no matter where you put it. I think think it’s like 0.0001% safer to use body instead of head. Come to think of it, I think the safest possible way is to target the first script tag it can find (there must be one somewhere, since this is JavaScript running) and insert the style element after it.

Possibly. But you just can’t know every possible situation. Like I mentioned above, what if you need to programmatically calculate what the style will be?