title: How should I organize the contents of my CSS file(s)?
body: <p>This question is about organizing the actual CSS directives themselves within a .css file.  When developing a new page or set of pages, I usually just add directives by hand to the .css file, trying to refactor when I can.  After some time, I have hundreds (or thousands) of lines and it can get difficult to find what I need when tweaking the layout.</p>
  
  <p>Does anyone have advice for how to organize the directives?</p>
  
  <ul>
  <li>Should I try to organize top-down, mimicking the DOM?</li>
  <li>Should I organize functionally, putting directives for elements that support the same parts of the UI together?</li>
  <li>Should I just sort everything alphabetically by selector?</li>
  <li>Some combination of these approaches?</li>
  </ul>
  
  <p>Also, is there a limit to how much CSS I should keep in one file before it might be a good idea to break it off into separate files?  Say, 1000 lines?  Or is it always a good idea to keep the whole thing in one place?</p>
  
  <p>Related Question: <a href="http://web.archive.org/web/20170119044450/http://stackoverflow.com:80/questions/72911/whats-the-best-way-to-organize-css-rules" rel="noreferrer">What's the best way to organize CSS rules?</a></p>