title: External stylesheet vs. JavaScript-added style tag
body: <p>I have multiple widgets that can be added to various Web pages. Each comes with its own stylesheet:</p>
  
  <pre><code>&lt;link type="text/css" href="http://mySite/widget1.css" /&gt;
  &lt;script type="text/javascript" src="http://mySite/widget1.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>The stylesheets are specific to each widget and very short (5 to 10 declarations).</p>
  
  <p>I am considering having the stylesheet created dynamically within the script, for two reasons:</p>
  
  <ul>
  <li>I find it painful to maintain two separate files</li>
  <li>replacing two http requests with one should bring performance improvements</li>
  </ul>
  
  <p>Something like this, inserted in widget1.js:</p>
  
  <pre><code>var stylesheet=document.createElement("style");
  stylesheet.innerHTML="#slideshow{width:500px;...";
  etc...
  </code></pre>
  
  <p>Anything wrong with this? This sounds like a good idea to me, but when I look at other examples (like jQuery plugins) the css and js are always in separate files.</p>