Analizar archivo HTML para obtener todas las ID y clases de un archivo CSS

Hace poco tiempo, estoy bastante seguro de haber encontrado una aplicación (o tal vez un complemento para Coda, el IDE que uso) que analiza rápidamente un documento html y luego escupe todos los elementos con IDs y clases para usar en un archivo CSS

Teniendo completamente ‘metido’ en la encoding zen, usando el maravilloso plugin TEA para Coda, ahora estoy siguiendo los pasos de esta aplicación / complemento de nuevo.

Intenté y fracasé miserablemente al cazar en Google, pero he salido completamente con las manos vacías.

¿Alguien sabe de algo que pueda hacer esto?

¡Feliz Año Nuevo a todos!

Supongo que estás buscando algo como http://lab.xms.pl/css-generator/

Pero debo advertirle: herramientas como esa solo generan la imagen aproximada del DOM, sin optimizaciones. Ninguna herramienta automatizada lo hará mejor que usted, especialmente si está en la ruta zen.

Que CSS3 esté contigo.

Sé que esto es de 2011 y es casi a finales de 2013, pero estaba tratando de encontrar una respuesta a este problema en Google y un enlace a esta publicación apareció en la primera página de resultados. No pude encontrar rápidamente una forma de obtener todos los nombres de clase o identificadores. Así que escribí el siguiente fragmento de 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 + "
"; } if(all[i].id !== ''){ st += all[i].id + "
"; } } document.write(st); }

Espero que esto ayude a alguien y haga que esta página sea más útil.

http://unused-css.com/

Eso es casi lo que estaba buscando … pero todo lo contrario 🙂

No conozco la herramienta de la que está hablando, pero puede crearla fácilmente con SAX, por ejemplo. Simplemente use la callback startElement para buscar atributos de “clase” e “id”.

Basándose en la respuesta de Jon Petersen, este obtiene todas las identificaciones y clases, las filtra a las únicas y prepara la salida para que pueda pegarse en su archivo css.

  function getAllCSS() { var all = document.getElementsByTagName("*"); var st = []; var trailing = " {

}
"; 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("
")); } getAllCSS();