Инструмент CSS "Нормализатор"?

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

Я использую последние дополнения Firebug и "Веб-разработчики" для Firefox, но, разумеется, для меня это недостаточно. Мне нужен инструмент, который может сказать мне, где избыточные "переопределения" и, возможно, предлагают лучшую каскадную схему.

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

Чтобы уточнить, я не ищу инструмент, который заменяет "# 000000" на "# 000", "0.5em" на ".5em", "white" на "#FFF" и т.д. (эти адреса избыточность "количества символов", но не учитывает избыточность "каскадной логики" ). Я ищу инструмент, который может сказать мне, например, что атрибут "font-size: 10px" дочернего элемента лишний, поскольку он уже унаследован от его родителя.

Более сложная функция: атрибут "color: # 000000" класса или идентификатора является избыточным, поскольку он не используется ни в одном из файлов HTML/PHP на веб-сайте.

Есть ли инструмент, который выполняет эту "нормализацию" автоматически?

Ответ 1

Для поиска дубликатов/неиспользуемых/ненужных CSS на основе вашей разметки вы можете попробовать WARI или Dust-Me Selectors (как указано @Aaron D), или CSS Crunch. Последние два являются расширениями браузера (для Firefox и IE соответственно), которые будут смотреть только на одну страницу, в то время как WARI предназначен для просмотра всего сайта. Тем не менее, мне не повезло, что WARI будет работать.

Ответ 2

Проверьте SASS, это компилятор CSS со своим языком и синтаксисом, но имеет возможность импорта CSS. http://sass-lang.com/

Интересно, может ли просто цикл импорта/экспорта сделать трюк для вас?

Изменить: похоже, что цикл импорта/экспорта недостаточно, но SASS предоставляет вам возможности для облегчения вашей жизни при рефакторинге.

Ответ 3

Я думаю, вы ищете святой Грааль CSS. Я не думаю, что он существует. Проблема в том, что вы никогда не знаете точно, что браузер будет отображать и нуждаться в вашей таблице стилей. Я использовал плагин Dust-me Selectors для Firefox, чтобы помочь найти неиспользуемые стили, но автоматически делать это - высокая задача.

Тем не менее, я считаю, что использование такой структуры, как SASS (как уже упоминалось) или LESS, является круглым ответом на ваш вопрос. Эти рамки устраняют много избыточности и делают ваш CSS компактным. Мне нравится LESS over SASS из-за сходства с CSS.

Ответ 4

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

Вероятно также, что такой инструмент создаст CSS, который будет менее ремонтопригодным, чем создатель приличного веб-дизайнера (я думаю, что сокращение селекторов, которые затем могут быть просто "повторно увеличены" позднее). Это не проблема, если это всего лишь временное действие, но мне интересно, зачем вам это нужно в первую очередь.

Ответ 5

Я не знаю такого инструмента и смотрю на сложность CSS, я даже не уверен, что это можно решить (некоторые стили CSS только что удаляют старые браузеры в соответствие). Итак, какое значение имеет инструмент для создания нового W3C-совместимого CSS, который не отображается в большинстве браузеров из-за ошибок?

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

Ответ 6

Вы можете попробовать YUI Compressor. Работает для файлов CSS и Javascript.

Ответ 7

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