Какой инструмент использовать для сравнения и сокращения таблиц стилей CSS

Question

У меня есть страница (page1.html), которая ссылается на файл CSS (style1.css)

Все хорошо.

Мне нужен Page1.html для дополнительной ссылки на Style2.css Однако, когда я добавляю ссылку, некоторые вещи на Page1.html облажаются.

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

Answer 1

Firebug показывает вам, какие правила переопределяются, и из какой таблицы стилей происходят эти правила.

Просто выберите проблемные элементы, и он покажет вам применяемые к нему правила. Затем вы можете включить / выключить их, чтобы увидеть эффект.

Answer 2

Непосредственно сравните две таблицы стилей CSS, чтобы сразу увидеть разницу между ними: http://www.alanhart.co.uk/archives/2010/12/15/compare-css-stylesheet-tool/

Очень удобно, когда вы вносите изменения в CSS сайта, и вы не можете запомнить, что вы изменили (если вы сохраняете резервную копию оригинала для сравнения)

Answer 3

DiffMerge (или любой другой инструмент для сравнения) хорош, если ваши файлы имеют похожий макет, но если они сильно отличаются (как, я полагаю, ваш CSS), они могут легко показать весь файл как одну большую разницу так что покажитесь бесполезным.

Что бы я сделал в этой ситуации, это установил инспектор dom в FireFox и проверил это дополнение.

Затем включите вторую таблицу стилей и просмотрите страницу.

Щелкните правой кнопкой мыши на заблокированном элементе и «Осмотрите это». Затем измените режим просмотра DOM инспектора на CSS. Он покажет вам текущий каскад стилей, примененных к текущему элементу, а также даст ссылку на какой файл и какую строку.

Таким образом, вы можете определить, где у вас конфликтующие стили.

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

Answer 4

Да, я хотел бы использовать инструмент сравнения ( DiffMerge бесплатен) и посмотреть, что похоже между двумя файлами CSS.

Answer 5

Я использовал этот класс php раньше - работает хорошо.

http://www.phpclasses.org/package/4638-PHP-Compare-two-CSS-style-definitions.html

Answer 6

Diffchecker (онлайн) инструмент. Довольно полезно и быстро. http://www.diffchecker.com/

Answer 7

Для разработчиков, использующих Visual Studio 2008 , которые могут читать это:

Когда вы выбираете элемент HTML в конструкторе WYSIWYG, вы можете использовать окно «Свойства CSS» для просмотра всех правил CSS и их соответствующих настроек, включая настройки каскадирования, унаследованные от различных правил CSS.

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

Answer 8

Все хорошие ответы .... Мне не хочется выбирать правильный на этот раз.

Просто чтобы добавить к смеси ... Коллега порекомендовал панель инструментов веб-разработчика для FF.

Я использовал CSS \ View Style Info, а затем щелкнул по странному материалу ... В новой таблице стилей я быстро нашел правило, которое радикально изменило его высоту.