Инструмент CSS «Нормализатор»? [закрыто]
7 ответов
Для поиска повторяющихся/неиспользуемых/ненужных CSS на основе вашей разметки вы можете попробовать WARI , или Селекторы Dust-Me (как упоминалось @Aaron D), или CSS Crunch. Последние два являются расширениями браузера (для Firefox и IE соответственно), которые будут просматривать только одну страницу, в то время как WARI предназначен для просмотра всего сайта. Однако мне не очень повезло заставить WARI работать.
Думаю, вы ищете Святой Грааль CSS. Я не думаю, что он существует. Проблема в том, что вы никогда не знаете, что именно браузер будет отображать и что нужно в вашей таблице стилей. Я использовал плагин Dust-me Selectors для Firefox, чтобы помочь найти неиспользуемые стили, но сделать это автоматически - непростая задача.
Тем не менее, я думаю, что использование таких фреймворков, как SASS (как уже упоминалось) или LESS , - это полный ответ на ваш вопрос. Фреймворки устраняют большую часть избыточности и делают ваш CSS компактным. Мне нравится МЕНЬШЕ по сравнению с SASS из-за сходства с CSS.
Обратите внимание на SASS, это компилятор CSS со своим собственным языком и синтаксисом, но он имеет возможность импорта CSS. http://sass-lang.com/
Интересно, поможет ли вам просто цикл импорта / экспорта?
Изменить: Похоже, цикла импорта / экспорта недостаточно, но SASS предоставляет вам возможности, чтобы облегчить вашу жизнь при рефакторинге.
Вы можете попробовать CSS Tidy ( онлайн-версия ). Это уменьшит избыточность, при необходимости преобразует в сокращенные стили и может использоваться для создания минифицированного вывода и красивого / отформатированного вывода.
Аарон хорошо отмечает сложность. Например, такому инструменту потребуется доступ не только к файлам CSS, но и к HTML (в противном случае он не смог бы определять такие вещи, как наследование). Вы тогда ищете что-то, что будет сканировать весь сайт и учитывать каждую страницу, или может ли разметка быть предоставлена из файлов?
Также вероятно, что такой инструмент будет создавать CSS, который менее удобен в обслуживании, чем приличный веб-дизайнер будет производить (я думаю, что сокращенные селекторы, которые потом, возможно, нужно будет `` повторно удлинить '' позже). Это не проблема, если это всего лишь временное действие, но мне интересно, зачем вам вообще это нужно делать.
Я не знаю такого инструмента и, глядя на сложность CSS, я даже не уверен, что это возможно решить (некоторые стили CSS существуют только для того, чтобы взломать старые браузеры в соответствии). Итак, насколько полезен инструмент, который создает новый W3C-совместимый CSS, который не отображается в большинстве браузеров из-за ошибок?
Тем не менее, вам следует взглянуть на Envjs , который позволяет вам чтобы прочитать веб-страницу в эмулируемом браузере, а затем изучить результат. Не идеально, но может помочь вам начать.
Вы можете попробовать YUI Compressor . Работает с файлами CSS и Javascript.