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

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

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

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

Ответ 1

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

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

Это выполнило мои особые требования.

Ответ 2

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

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

Ответ 3

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

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

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

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

Ответ 4

Если вы используете Mac, откройте оба файла css в Text Wrangler (без приложения) и сравните их с помощью встроенной функции "Сравните два передних документа".

Если вы пользователь Windows, откройте оба файла в блокноте ++ и в меню инструментов выберите сравнение.