Разбирайте HTML-файл, чтобы захватить все идентификаторы и classы для файла CSS

Некоторое время назад я вполне уверен, что мне попалось приложение (или, возможно, плагин для Coda – используемая среда IDE), которая быстро анализирует html-документ, а затем выплевывает все элементы с идентификаторами и classами для меня, чтобы использовать в файле CSS.

Полностью «вдаваясь» в кодирование zen – используя замечательный плагин TEA для Coda, теперь я снова горячий по пятам этого приложения / плагина.

Я пробовал и терпел неудачу на охоте через Google, но пришел полностью с пустыми armми.

Кто-нибудь знает что-нибудь, что может это сделать?

Всех с Новым годом!

Я предполагаю, что вы ищете что-то вроде http://lab.xms.pl/css-generator/

Но я должен предупредить вас – инструменты вроде этого выводят очень грубую картину DOM без каких-либо оптимизаций. Никакой автоматизированный инструмент не сделает это лучше, чем вы можете, особенно если вы находитесь на дзэн-пути.

Пусть CSS3 будет с вами.

Я знаю, что это с 2011 года, и это почти конец 2013 года, но я пытался найти ответ на эту проблему в Google, и ссылка на этот пост появилась на первой странице результатов. Я не мог быстро найти способ получить все имена classов или идентификаторы. Поэтому я написал следующий бит 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); }

Надеюсь, это поможет кому-то и сделает эту страницу более полезной.

http://unused-css.com/

Это почти то, что я искал … но вроде наоборот 🙂

Я не знаю инструмент, о котором вы говорите, но вы можете легко создать такой инструмент с помощью SAX. Просто используйте обратный вызов startElement для поиска атрибутов «class» и «id».

Основываясь на ответе Джона Петерсена, он получает все идентификаторы и classы, фильтрует их на уникальные и готовит вывод, чтобы его можно было вставить в ваш файл 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();