title: Best practices: Organizing CSS files within a large Backbone.js app, and accounting for image sprites?
body: <p>I inherited a Backbone.js app that has one stylesheet with 3000 lines.  </p>
  
  <p>I would like to refactor this into multiple stylesheets (and maybe start using a preprocessor like SASS).  I would also like to start using CSS sprites for my images, since I believe this could shave a full second or two off load times.</p>
  
  <p>Is there a best practice for splitting a mega-CSS file Backbone.js app into multiple CSS files?  </p>
  
  <p>What about for organizing my rules and sprites so that when I add a new image, and the sprite generator "optimizes" the space-layout of the sprite, I don't have to hunt down every single selector and change the background-position coordinates? </p>
  
  <p>I was thinking of keeping a separate "sprites.css" file (it would get minified and concatenated for production deploy) that simply contained all of the positions and height/width values.  </p>
  
  <p>Thanks.</p>