Инструмент для анализа и сравнения двух таблиц стилей CSS

Question

Кто-нибудь знает хороший инструмент, который может анализировать и сравнивать две таблицы стилей CSS, чтобы найти, какие селекторы имеют разные стили?

Я не могу использовать стандартный diff-подобный инструмент, потому что два CSS-файла имеют очень разную компоновку. Мне нужен инструмент, который может анализировать и понимать CSS, а затем искать селекторы, которые на самом деле имеют разные стили в двух таблицах стилей.

Единственный инструмент, который я нашел, - это CSS Comparer от Alan Hart, однако он запутывается, когда есть стили, которые применяются к нескольким селекторам.

Answer 1

Вот что я сделал в случае, если у кого-то есть такая же проблема:

1. Я использовал CSSTidy для "нормализации" двух таблиц стилей, которые я хотел сравнить. Нормализация в моем случае означала разделение нескольких селекторов и сортировку селекторов и свойств. Онлайн версия CSSTidy доступна здесь.
2. После этого я использовал инструмент CSS Comparer от Alan Hart, чтобы выяснить различия между двумя таблицами стилей.

Это сделало работу для моих конкретных требований.

Answer 2

Я пытался использовать CSS Compare. Кажется, он делает именно то, что вы ищете. Тем не менее, кажется, есть некоторые проблемы с несколькими селекторами. Приятно то, что он управляется из командной строки, поэтому вы можете настроить автоматизированный процесс, если у вас много CSS-файлов, или вы можете объединить CSS-файлы в цепочку, чтобы сравнить их с одним гигантским результирующим SASS-файлом. Этот инструмент покажет вам все различия, в том числе различия в значениях классов.

Что было бы действительно хорошо, если бы инструмент показал вам, какие стили перекрывают другие стили в той же таблице стилей. Многие старые сайты имеют много багажа таким образом, и его фильтрация была бы великолепна. Конечно, автоматизированный инструмент может вызвать проблемы, но по крайней мере то, что генерирует отчет, как Firebug, за исключением каждого селектора и всей коллекции CSS-файлов, было бы замечательно. К сожалению, CSS Compare не такой инструмент, и я не знаю ни одного:(

Answer 3

Я бы загрузил веб-страницу, используя одну таблицу стилей на одной вкладке, а другую таблицу стилей на другой вкладке. Затем используйте инспектора или firebug, чтобы проверить стиль соответствующих узлов.

Очевидно, это очень ручная работа, но вы спрашиваете, какая банальная ошибка для сломанного процесса, и вы вряд ли найдете большую помощь.

Если у вас есть некоторый опыт программирования, вы, вероятно, могли бы написать собственный синтаксический анализатор, который бы сообщал о каждом определенном классе и его стиле. Тем не менее, это, вероятно, больше работы, чем оно того стоит.

Сделайте это вручную один раз, а затем исправьте проблему, перейдя на SASS ( http://sass-lang.com/) и улучшив организацию ваших веб-сайтов.