title: CSS optimization to auto change class names
body: <p>I am looking for a tool to optimize my website's complete build. I am using <code>SASS</code> as a <code>CSS preprocessor</code> and <code>Uglify</code> to create my JavaScript files, and a couple of more tools all tied together with <code>Grunt</code>. Also, the markup is in this case a single <code>index.html</code> file, but in other projects it's in either PHP files or in Liquid templates.</p>
  
  <p>I am using BEM (<a href="http://en.wikipedia.org/wiki/BEM" rel="nofollow">block, element, modifier</a>) to name my classes and sometimes, that leads to quite huge <code>classnames</code>, such as <code>navigation__item__link--home</code> or even longer.</p>
  
  <p>I am looking for a tool that automatically converts the final, built <code>CSS</code> files in a way that it changes the class or id names to something like <code>.a, .b</code>, but changes every HTML and JavaScript files according to the same method, so that correlated codes won't get messed up.</p>
  
  <p>I want to keep my original project files of course, so I would like the tool to be capable of creating new files according to these rules and preferably, capable of using it with <code>Grunt</code>.</p>