title: Generating CSS stylesheet using JS
body: <p>I was recently attempting to build an extremely minimalistic, lightweight css framework (something like <a href="http://purecss.io" rel="nofollow">Pure CSS</a>).</p>
  
  <p>On inspecting my code, one of my friends suggested that I generate my CSS using Javascript, primarily for the significant decrease in file size. The file size would decrease in the following two cases:</p>
  
  <ol>
  <li><p>The columns classes look something like <code>col-x-12</code>, and JS would be able to calculate the widths and write the column classes using much less code.</p></li>
  <li><p>I would be able to map CSS attributes in JS (<code>bg</code> for <code>background</code>, for example), thus also reducing file size.</p></li>
  </ol>
  
  <p>The generated CSS could directly be inserted into the <code>head</code> or added to the <a href="https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet" rel="nofollow"><code>CSSStyleSheet</code></a>.</p>
  
  <p>Apart from the little overhead caused by running the JS, what other problems may this approach cause?</p>