<p>My HTML is all marked up, ready to make it rain CSS.  The problem is that I have to go back and find out what all my id and class names are so I can get started.  What I need is a tool that parses my HTML and spits out a stylesheet with all the possible elements ready to be styled (maybe even with some defaults).  Does such a tool exist?</p>

I have a poor man's version of this I have used in the past... this requires jquery and firebug...
```
```
<script type="text/javascript">
    $(document).ready(function() {

        $('*[@id]').each(function() {
            console.log('#' + this.id + ' {}');
        });
        $('*[@class]').each(function() {
            $.each($(this).attr('class').split(" "), function() {
                console.log('.' + this + ' {}');
            });
        });
     });
</script>
```
```
it gives you something like this:
```
```
#spinner {}
#log {}
#area {}
.cards {}
.dialog {}
.controller {}
```
```
if you want them in "natural" page order instead...
```
```
<script type="text/javascript">
    $(document).ready(function() {
         $('*').each(function() {
             if($(this).is('[@id]')) {
                 console.log('#' + this.id + ' {}');
             }
             if($(this).is('[@class]')) {
                 $.each($(this).attr('class').split(" "), function() {
                     console.log('.' + this + ' {}');
                 });
             }
         });
     });
</script>
```
```
I just load the page with that script in there, then cut and paste the results out of firebug... then obviously, remove the script :)
you'll need to remove the dups manually or just toss in some simple dup checking logic with a map or array or something.. one for IDs and one for classes.