views:

32

answers:

0

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; }