Question

A short while ago, I m fairly certain I came across an application (or perhaps a plugin for Coda - the IDE I use) which quickly parses a html document and then spits out all of the elements with IDs and Classes for me to use in a CSS file.

Having fully got into zen coding - using the wonderful TEA plugin for Coda, I m now hot on the heels of this app/plugin again.

I ve tried and failed miserably at hunting through Google, but have come up completely empty handed.

Does anyone know of anything which can do this?

Happy New Year everyone!

Answer 1

I suppose you re looking for something like http://lab.xms.pl/css-generator/

But I have to warn you -- tools like that one only output the very rough picture of the DOM, without any optimizations. No automated tool will do it better than you can, especially if you re on the zen path.

May CSS3 be with you.

Answer 2

I know that this is from 2011 and it is almost the end of 2013, but I was trying to find an answer to this problem on Google and a link to this post came up in the first page of results. I couldn’t quickly find a way to get all class names or ids. So I wrote the following bit of JavaScript.

function printAllElements() {
    var all = document.getElementsByTagName("*");
    var st = "";
    for (var i = 0, max = all.length; i < max; i++) {
        if(all[i].className !==   ){
            st += all[i].className + "<br>";
        }
        if(all[i].id !==   ){
            st += all[i].id + "<br>";
        }
    }
    document.write(st);
}

I hope this helps someone and makes this page more useful.

Answer 3

http://unused-css.com/

That s almost what I was looking for...but kind of the opposite :)

Answer 4

I don t know the tool you re talking about, but you can create such a tool very easily with SAX for instance. Just use the startElement callback to hunt for "class" and "id" attributes.

Answer 5

Building on Jon Petersen s answer, this gets all id s and classes, filters them to the unique ones and prepares the output so it can be pasted into your css file.

    function getAllCSS() {
        var all = document.getElementsByTagName("*");
        var st = [];
        var trailing = " {<br /><br />}<br />";
        for (var i = 0, max = all.length; i < max; i++) {
            if (all[i].className !==   ) {
                st.push( .  + all[i].className + trailing);
            }
            if (all[i].id !==   ) {
                st.push( #  + all[i].id + trailing);
            }
        }
        var unique = st.filter(function (item, i, ar) { return ar.indexOf(item) === i; });

        document.write(unique.join("<br />"));
    }
    getAllCSS();

友情链接