title: Programmatically separate stylesheet into sub-stylesheets?
body: <p>Say you have a massive stylesheet with a full site worth of selectors, each loaded with  properties in it (positioning, sizing, fonts, colors, etc... all together) and you want to separate them into different, appropriate files (e.g. fonts.css, colors.css, layout.css, etc..)..</p>
  
  <p>Are there any known (automated) methods for completing such a task? </p>
  
  <p>Example:</p>
  
  <pre><code>#myid {
  display:block;
  width:100px;
  height:100px;
  border:1px solid #f00;
  background-color:#f00;
  font-size:.75em;
  color:#000;
  }
  </code></pre>
  
  <p>Would be converted to the following 3 files:</p>
  
  <p>layout.css:</p>
  
  <pre><code>#myid {
      display:block;
      width:100px;
      height:100px;
  }
  </code></pre>
  
  <p>color.css:</p>
  
  <pre><code>#myid {
      border:1px solid #f00;
      background-color:#f00;
      color:#000;
  }
  </code></pre>
  
  <p>fonts.css:</p>
  
  <pre><code>#myid {
      font-size:.75em;
  }
  </code></pre>
  
  <p>My example probably doesn't utilize the best conventions for doing this, but a way to automate the separation of the properties into different files would be very convenient in framework creation, I imagine.</p>