title: CSS Files and Unwanted Overriding
body: <p>I have a simple HTML page that is referencing 3 CSS files.  The first is a style sheet that is just for the page.  The other two are for the styles of two unique modals.  These modal CSS files were not created by me and they are happily being used <em>separately</em> on other pages throughout the site.  </p>
  
  <p>My problem is that both of these modal CSS files contain a few common selectors and so they are messing up each other's styles.</p>
  
  <p>I understand that the best way to fix this problem is to take one or both of the files and make their selectors unique.  One way would be to namespace the selectors.</p>
  
  <p>My questions is, however, now that I'm knee-deep in this page, is there anyway to prevent these CSS conflicts without changing the modal CSS pages as they currently stand?  Are there any tools that can help such as <a href="http://lesscss.org" rel="nofollow">LESS</a>?  What is the best practice for preventing this in the future?</p>