Do you know any tool that takes a CSS stylesheet and a bunch of HTML files and then is able to identify CSS rules on the DOM and rewrite them according to the optimal element DOM path?
Example HTML snippet:
<div id="container">
<div class="profile">
<img class="thumb" src="xxx" />
<span class="nickname">knoopx</span>
</div>
</div>
Input CSS stylesheet:
.profile { float: left; width: 100px; }
.thumb { border: 1px solid #eee; }
.nickname { font-weight: bold; }
Output CSS stylesheet:
div#container > div.profile { float: left; width: 100px; }
div#container > div.profile > img.thumb { border: 1px solid #eee; }
div#container > div.profile > span.nickname { font-weight: bold; }